0

I'm trying to use the useContext() hook but keep running into the standard React hook errors (e.g. Hooks can only be called within function, possible duplicate React versions etc..). Thinking this to be a configuration issue on my local computer I attempted, and succeeeded, in duplicating the issue in this sandbox: https://codesandbox.io/s/contextapi-hooks-wjvuk?file=/src/components/pages/Home.js

I've been through a bunch of tutorials and read some posts here but none of the successful solutions point me in the direction of solving my issue.

I believe I'm missing a small detail in my implementation so any help/advice, whether practical or theoretical, to consolidate my understanding of React and Context-API would be much appreciated.

Cheers!

spoons
  • 75
  • 5

1 Answers1

1

You are allowed to use hooks only inside a component. Currently, your Home function isn't used as a component anywhere, so you can't use useContext inside it. Try to replace this line:

<Route exact path="/" render={Home} />

with:

<Route exact path="/"><Home /></Route>

fullstack
  • 754
  • 3
  • 20
  • Hey thanks @fullstack, I knew this had to be a simple fix but I am obviously missing some details as to how a component is rendered. My understanding was that if I "render" a component then I'm using it's function. Could you clarify what the render actually does? – spoons Aug 16 '21 at 14:38
  • See [here](https://stackoverflow.com/questions/48150567/react-router-difference-between-component-and-render) what is the difference between the two approaches. – fullstack Aug 17 '21 at 06:06