i'm trying to do a webpage for my Blockchain project and run into JS Mastery youtube web3 tutorial and i'm following it. I was creating the connect wallet button but I encountered some trouble in importing it from my context. Below the code:
//inside my prenotationContext.jsx
const PrenotationContext = React.createContext();
export default PrenotationContext;
export const PrenotationProvider = ({children}) => {
const [currentAccount, setCurrentAccount] = useState("");
const [formData, setFormData] = useState({addressTo: "", amount:"", keyword:"", description:"" });
const [isLoading, setIsLoading] = useState(false);
...
const connectWallet = async () => {
try {
if (!ethereum) return alert("Please install MetaMask.");
const accounts = await ethereum.request({ method: 'eth_requestAccounts', });
console.log(accounts)
setCurrentAccount(accounts[0]);
window.location.reload();
} catch (error) {
console.log(error);
throw new Error("No ethereum object");
}
};
...
return (
<PrenotationContext.Provider
value={{
connectWallet,
currentAccount,
formData,
sendPrenotation,
handleChange,}}>
{children}
</PrenotationContext.Provider>
);
}
//inside my welcome.jsx
import PrenotationContext from '../context/PrenotationContext.jsx';
...
const Welcome = () => {
// Transfering data from context/PrenotationContext to components
const {connectWallet,currentAccount, formData, sendPrenotation, handleChange} = useContext(PrenotationContext);
...
The error is the following:
Uncaught TypeError: Cannot destructure property 'connectWallet' of 'useContext(...)' as it is undefined at Welcome (Welcome.jsx:25:12)
Btw i'm not a front-end developer and that's my first time using JS and React, so it's not easy for me to find the errors
If you want to call context you should wrapp your component by contextProvider.
const App = () => {
return (
<PrenotationProvider>
// some other components
<Welcome />
// some other components
</PrenotationProvider>
);
};
Put a provider at the high level of application, then you will get all data inside any components