In useState default value set to false and send it to login component. But login component is not getting the value(user, setUser).
import Login from "../Routes/Login";
const useAuth = () => {
const [user, setUser] = useState(false);
return (
<div>
<Login user={user} setUser={setUser}></Login>
</div>
)
}
export default useAuth;
When I am clicking on Login button it's causing an error called "Uncaught TypeError: setUser is not a function". When login button is clicked I want to change the value of "user" false to true.
const Login = ({ user, setUser }) => {
console.log(user);
return (
<div>
<button onClick={() => { setUser(true) }}>Login</button>
</div>
);
}
export default Login;
I was not able to replicate the issue that you mentioned. Here is the code sandbox link below: https://codesandbox.io/s/wizardly-pine-4edci7?file=/src/App.js
The naming convention that you used for the useAuth component is incorrect. From the naming convention it seems like it is a custom hook but rather it is a component.
So, you should use the following naming convention for it UseAuth. And it works fine in the above given codesandbox link.
Additional Note: All the custom hooks in reactjs are to be prefixed with use keyword. So, I would suggest to change the name of the component from useAuth to just Auth all together.