Invalid hook call inside React.FC

user_9119186 0
Viewed 498

I'm using typescript and simply using a hook inside React.FC but I'm getting error saying I can only use hooks inside functional components. React.FC doens't count as a funcional component?

Here is what I'm doing

interface Props { }

export const Register: React.FC<Props> = () => {
  const [test, setTest] = useState('')

  return (
    <div>
      Register View
    </div>
  )
}

And the error

enter image description here

× Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

This makes no sense, how is this possible? If I remove the line const [test, setTest] = useState(''), everything works normal.

react-hooks typescript reactjs
2 Answers

You can only use hooks in a functional component that you render with jsx I guess you try to render the functional component with {Register(props)} but you should render it with <Register {...props}>.

user_16419410

HMR is correct, I figure out that the problem was on how I was creating the routes.

I was using render, which do something like Register(props)

<Route exact path='/register' render={Register} />

But I should be using component for <Register {...props}> to be created

<Route exact path='/register' component={Register} />
user_91191860
Related