Uncaught TypeError: Cannot destructure property 'connectWallet' of 'useContext(...)' as it is undefined at Welcome (Welcome.jsx)

Question

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

Answer 1

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