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')
Advertisement
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
