Categories
react-hooks reactjs

Rendered more hooks than during the previous render when adding a hook component

I have a useInput hook component that works like this:

useInput(
<input placeholder="phone number" />,
"phone"
)

It gets an (input,inputName) and returns a hooked input component.
When I want to dynamically change the visibility of existing input in my view, I get an error: Rendered more hooks than during the previous render.

{this.state.showMyInput && useInput(
<input placeholder="phone number" />,
"phone"
)
}

From react documentation you can’t use a hook with conditionnal operator.

You can call hook all the time and store the result in a variable, and just condition the render instead.

const input = useInput(input, inputName);
...
{this.state.showMyInput && input}