Projects.js

import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import Web3Modal from 'web3modal';

export default function Projects() {
  const [funds, setFunds] = useState([]);
  const [contract, setContract] = useState(null);
  const [accounts, setAccounts] = useState(null);

  useEffect(() => {
    init();
  }, []);

  const init = async () => {
    const web3Modal = new Web3Modal({
      network: 'mainnet',
      cacheProvider: true,
    });
    const provider = await web3Modal.connect();
    const web3 = new Web3(provider);
    try {
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = FundraiserFactory.networks[networkId];
      const accounts = await web3.eth.getAccounts();
      const instance = new web3.eth.Contract(
        FundraiserFactory.abi,
        deployedNetwork && deployedNetwork.address,
      );
      setContract(instance);
      setAccounts(accounts);
      {/* we are calling 20 fundraisers to save gas, even though viewing data 
          from the blockchain doesn't cost anything (in gas), it still uses 
          resources on the EVM.
       */}
      const funds = await instance.methods.fundraisers(20, 0).call();
      setFunds(funds);
    } catch (error) {
      console.error(error);
    }
  };
...
  return (...);
}