How to fix invalid Hook call error in react

Question

Im building a project with react and redux , but when I wrap my APP component with the PROVIDER HOOK from react-redux , I get an error (invalid Hook call error). Any ideas on how to fix it

Answer 1

Are you returned properly.

Answer 2

Check out this code to study how react hook works with redux.

https://code.sololearn.com/W8a21a131a17/?ref=app

Answer 3

For react hook, all component must be in functional components. Convert all your class components to functional components

Answer 4

Jsx only work from return statement of component function, e.g.

const App = ()={
return (
{/* jsx here */}
)
}

Or

const App = ()=>(
{/* jsx here */}
)

Answer 5

Kelvin Paul , I tried it on an online text editor it works fine, but when I try it on my local machine I get that error ( INVALID HOOK CALL )

Answer 6

Kelvin Paul , I've literally ran out of ideas I made sure all dependencies were up to date , deleted node_modules folder again and ran *npm install* , still nothing , I'm using the latest versions of everything

Answer 7

Bro can you please share your code?☺

Answer 8

Can you specify the error. I'm just guessing, just wrap that jsx using a function

Answer 9

Calviղ
my component is a function based component

Answer 10

Dexter 🐺 bro according to the react official. I think you may imported more than one times the react file as script, or you were using old version. Please checkout.

Answer 11

It was a long line of code but I deleted most of it what I'm left with is

import { Provider } from "react-redux"
Import Store from "./Store"

const App = ()=>{
<Provider store={Store} >
<div> Hello world </div>
</Provider>
}

export default App

Answer 12

Kelvin Paul , I was working on a auth system with Django , react and redux and some other stuff , but I was able to isolate the fault to this 👆👆

Answer 13

Kelvin Paul , the error arises immediately I wrap my APP component with PROVIDER

Answer 14

You might be breaking the rules of hooks :

https://reactjs.org/warnings/invalid-hook-call-warning.html

Or More likely ,

Maybe you have another copy of react in the same app. The doc has addressed this problem as well.