Uncaught TypeError: Cannot destructure property ‘xxx’ of ‘useAuth(…)’ as it is undefined

Working with React Context and Hooks I am creating a provider called AuthProvider and from the useAuth Hook I call that context to work with it. I have a component called Login in which I call my Hook to access the AuthProvider as follows:

import useAuth from '../hooks/useAuth'

const Login = () => {

  const { hello } = useAuth() 

  console.log(hello);

...

In AuthContext I have the variable “hello” that I pass to the children of my context.

AuthProvider:

const AuthContext = createContext()

const AuthProvider = ({children}) => {

    const hello= 'hello'

    return (
        <AuthContext.Provider value={{ hello }}>
          {children}
        </AuthContext.Provider>
      )
}

export {
     AuthProvider
}

export default AuthContext

UseAuth Hook:

import { useContext } from "react";
import AuthContext from "../context/AuthProvider";

const useAuth  = () => {

     return useContext(AuthContext)

}

export default useAuth

And this is the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'hello')

Answer

The problem is that the component you use context but was not wrapped under a context provider

To fix, wrap the component or the root component that has the component as a children under a context provider

<AuthProvider>
  <Login />
</AuthProvider>

Demo

References

https://reactjs.org/docs/context.html

https://reactjs.org/docs/hooks-reference.html#usecontext