After inserting const web3React = useWeb3React();
into my App.js
component, I get the following error message.
React Hook "useWeb3React" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.
Code Snippet:
import React, { useEffect } from "react";
import { useWeb3React, Web3ReactProvider } from "@web3-react/core";
import Web3 from "web3";
import SmartContractManagementComponent from "./components/SmartContractManagementComponent";
import Navbar from "./components/Navbar";
import CreateContract from "./components/CreateContract";
import TransactionDashboard from "./components/TransactionDashboard";
import Footer from "./components/Footer";
import { WalletConnector } from "./components/wallet/WalletConnector";
const App = () => {
useEffect(() => {
const web3React = useWeb3React();
}, []);
const getLibrary = (provider) => {
return new Web3(provider);
};
return (
<Web3ReactProvider getLibrary={getLibrary}>
<div className='App'>
<Navbar />
<WalletConnector />
<div className='flex flex-row w-full'>
<CreateContract className='flex w-1/2' />
<TransactionDashboard className='flex w-1/2' />
</div>
<Footer />
</div>
</Web3ReactProvider>
);
};
Can anybody explain what I'm doing wrong to access the useWeb3React
-Hook? I thought it useful to call the hook just after the other components have been mounted so that MetaMask will already be injected.