When I try and call a function from my custom hook I get back an error when the screen loads saying setAuth is not a function.
useAuth.js
import { useContext } from "react";
import AuthContext from "../context/AuthProvider";
const useAuth = () => {
return useContext(AuthContext);
}
export default useAuth;
login.js
import useAuth from '../hooks/useAuth';
...
const Login = () => {
const { setAuth } = useAuth();
....
setAuth({ email, password, accessToken });
...
}
If I try and display typeof(setAuth) I get undifined.
You need to ensure your AuthContext has a setAuth function. Where you are calling your AuthContext.Provider you must provide setAuth function in the value prop
<AuthContext.Provider value={{ setAuth }}>
You can then access setAuth
const useAuth = () => {
const { setAuth } = useContext(AuthContext);
return setAuth
}
login.js
const Login = () => {
const setAuth = useAuth();
....
setAuth({ email, password, accessToken });
...
}