将基于反应类的组件转换为基于功能的组件

Question

I am new to learning react and I am having a tough time converting class components into functional components for understanding problems and analyzing. I want to use functional approach for understanding states and life cycle methods how that works in hooks' concept.

import React, { Component } from "react";
import { ButtonGroup, Button } from "react-bootstrap";
import "./MinterBody.css";
import axios from "axios";


var account = null;
var contract = null;
var vaultcontract = null;
var web3 = null;

const NFTCONTRACT = "0xC6Ad2824B03275D4cC5E8f4f61c5a143b999717b";
const STAKINGCONTRACT = "0x09aE75315fE2E63271B4F218C4b00F4fF143052A"
const polygonscanapikey = "DBQX5JUSAVUZRK8CC4IN2UZF9N2HA63P4U";
const polygonscanapi = "https://api-testnet.polygonscan.com/api"
const moralisapi = "https://deep-index.moralis.io/api/v2/";
const moralisapikey = "2VBV4vaCLiuGu6Vu7epXKlFItGe3jSPON8WV4CrXKYaNBEazEUrf1xwHxbrIo1oM";
const nftpng = "https://ipfs.io/ipfs/QmavM8Zpo9bD3r4zEnhbbBLLvHyfr1YL7f1faG3ovaeSSG/";


class MinterCard extends Component {

    constructor() {
        super();
        this.state = {
            balance: [],
            nftdata: [],
            rawearn: [],
        };
    }

    handleModal() {
        this.setState({ show: !this.state.show })
    }

    handleNFT(nftamount) {
        this.setState({ outvalue: nftamount.target.value });
    }

    async componentDidMount() {

        await axios.get((polygonscanapi + `?module=stats&action=tokensupply&contractaddress=${NFTCONTRACT}&apikey=${polygonscanapikey}`))
            .then(outputa => {
                this.setState({
                    balance: outputa.data
                })
                console.log(outputa.data)
            })
        let config = { 'X-API-Key': moralisapikey, 'accept': 'application/json' };
        await axios.get((moralisapi + `/nft/${NFTCONTRACT}/owners?chain=mumbai&format=decimal`), { headers: config })
            .then(outputb => {
                const { result } = outputb.data
                this.setState({
                    nftdata: result
                })
                console.log(outputb.data)
            })
    }

    render() {
        const { balance } = this.state;
        const { nftdata } = this.state;
        const { outvalue } = this.state;


        return (

            <div className="container col-lg-11">
                <div className="row items px-3 pt-3">
                    <div className="ml-3 mr-3" style={{ display: "inline-grid", gridTemplateColumns: "repeat(4, 5fr)", columnGap: "20px" }}>
                        {nftdata.map((result, i) => {
                            async function stakeit() {
                                vaultcontract.methods.stake([result.token_id]).send({ from: account });
                            }
                            async function unstakeit() {
                                vaultcontract.methods.unstake([result.token_id]).send({ from: account });
                            }
                            return (
                                <div className="card nft-card mt-3" key={i} >
                                    <div className="image-over">
                                        <img className="card-img-top" src={nftpng + result.token_id + '.png'} alt="" />
                                    </div>
                                    <div className="card-caption col-12 p-0">
                                        <div className="card-body">
                                            <h5 className="mb-0">Net2Dev Collection NFT #{result.token_id}</h5>
                                            <h5 className="mb-0 mt-2">Location Status<p style={{ color: "#39FF14", fontWeight: "bold", textShadow: "1px 1px 2px #000000" }}>{result.owner_of}</p></h5>
                                            <div className="card-bottom d-flex justify-content-between">
                                                <input key={i} type="hidden" id='stakeid' value={result.token_id} />
                                                <Button style={{ marginLeft: '2px', backgroundColor: "#ffffff10" }} onClick={stakeit}>Stake it</Button>
                                                <Button style={{ marginLeft: '2px', backgroundColor: "#ffffff10" }} onClick={unstakeit}>Unstake it</Button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        );
    };
}

export default MinterCard;

I'll be grateful for your help. Please, if you can convert, I'll appreciated

Answer 1

import React, { Component, useState } from "react";
import { ButtonGroup, Button } from "react-bootstrap";
import "./MinterBody.css";
import axios from "axios";



const  MinterCard =()=> {
cosnt [myState, setMyState] = useState()
var account = null;
var contract = null;
var vaultcontract = null;
var web3 = null;

const NFTCONTRACT = "0xC6Ad2824B03275D4cC5E8f4f61c5a143b999717b";
const STAKINGCONTRACT = "0x09aE75315fE2E63271B4F218C4b00F4fF143052A"
const polygonscanapikey = "DBQX5JUSAVUZRK8CC4IN2UZF9N2HA63P4U";
const polygonscanapi = "https://api-testnet.polygonscan.com/api"
const moralisapi = "https://deep-index.moralis.io/api/v2/";
const moralisapikey = "2VBV4vaCLiuGu6Vu7epXKlFItGe3jSPON8WV4CrXKYaNBEazEUrf1xwHxbrIo1oM";
const nftpng = "https://ipfs.io/ipfs/QmavM8Zpo9bD3r4zEnhbbBLLvHyfr1YL7f1faG3ovaeSSG/";

    await axios.get((polygonscanapi + `?module=stats&action=tokensupply&contractaddress=${NFTCONTRACT}&apikey=${polygonscanapikey}`))
        .then(outputa => {
            setMyState({
                balance: outputa.data
            })
            console.log(outputa.data)
        })
    let config = { 'X-API-Key': moralisapikey, 'accept': 'application/json' };
    await axios.get((moralisapi + `/nft/${NFTCONTRACT}/owners?chain=mumbai&format=decimal`), { headers: config })
        .then(outputb => {
            const { result } = outputb.data
            setMyState({
                nftdata: result
            })
            console.log(outputb.data)
        })
    return (

        <div className="container col-lg-11">
            <div className="row items px-3 pt-3">
                <div className="ml-3 mr-3" style={{ display: "inline-grid", gridTemplateColumns: "repeat(4, 5fr)", columnGap: "20px" }}>
                    {nftdata.map((result, i) => {
                        async function stakeit() {
                            vaultcontract.methods.stake([result.token_id]).send({ from: account });
                        }
                        async function unstakeit() {
                            vaultcontract.methods.unstake([result.token_id]).send({ from: account });
                        }
                        return (
                            <div className="card nft-card mt-3" key={i} >
                                <div className="image-over">
                                    <img className="card-img-top" src={nftpng + result.token_id + '.png'} alt="" />
                                </div>
                                <div className="card-caption col-12 p-0">
                                    <div className="card-body">
                                        <h5 className="mb-0">Net2Dev Collection NFT #{result.token_id}</h5>
                                        <h5 className="mb-0 mt-2">Location Status<p style={{ color: "#39FF14", fontWeight: "bold", textShadow: "1px 1px 2px #000000" }}>{result.owner_of}</p></h5>
                                        <div className="card-bottom d-flex justify-content-between">
                                            <input key={i} type="hidden" id='stakeid' value={result.token_id} />
                                            <Button style={{ marginLeft: '2px', backgroundColor: "#ffffff10" }} onClick={stakeit}>Stake it</Button>
                                            <Button style={{ marginLeft: '2px', backgroundColor: "#ffffff10" }} onClick={unstakeit}>Unstake it</Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}

export default MinterCard;