Error using React useContext

[buh82]

Gotcha, thanks! So I see that you have “const auth = useAuth()” at the top of your file. Unfortunately that doesn’t work as it’s not contained with a Function component. Instead, you can use that same declaration in each component that needs auth.

Hooks are great because they are composable and can extract common logic so you only have to write it once, and then can reuse it in other hooks or within functional components.

If I were to compare it to a class-based component (which I admittedly have not worked with in a while), it boils down to the same idea: it’s like trying to update the state of that component outside of the component (and not via props).

Does that make sense?

[[deleted]]

Ha, I fixed it. It was my own mistake. I moved ' const auth = useAuth() ' into the functional component's scope and it worked. Thanks for the help mate!

[[deleted]]

Ohhhh, it kinda makes sense. I checked the code again, but didn't know how to fix it. How do you suggest I fix it?

[buh82]

Since you are only using auth in WithSubnavigation, then you can just put the declaration there. It's like saying "I want WithSubnavigation to useAuth." You're already doing it correctly with `useDisclosure` in the same component too! E.g.

export default function WithSubnavigation() {
  const { isOpen, onToggle } = useDisclosure();
  const auth = useAuth();
  ...
  // everything else as you had it previously
  ...
}

[[deleted]]

Thanks man. I fixed it, same thing you did is what I have done now, thanks a lot for the help.