CODEWITHSUNDEEP
reactjs
boykland
boykland

Reputation: 144

Warning: Input is changing a controlled input of type text to be uncontrolled

Correct way to implement the react reactstrap Input type checkbox component

I have been having some trouble to implement the reacstrap input type checkbox component, i do not know if i'm doing something wrong in the implementation, but the browser is displaying me an error when i set a state to get the input checked value.

error

Warning: Input is changing a controlled input of type text to be uncontrolled. 
Input elements should not switch from controlled to uncontrolled (or vice versa). 
Decide between using a controlled or uncontrolled input element for the lifetime of the 
component.

I read about the using of uncontrolled component and controlled component. I tried to use the ref property, but I still do not find the way to solve this. I'll appreciate any help you can give me. Thanks

libraries versión

  • react#15.6.1
  • reactstrap #4.8.0
  • components: <Input type="checkbox" />
  • browser: Chrome

This is a link with only the react component class code

gist code link

Upvotes: 2

Views: 1276

Answers (1)

Chris Schuld
Chris Schuld

Reputation: 279

My guess is that you are using an undefined state to load the value of the <Input> component.

For example if you initialize state like this:

this.state = { person: {} };

And your input is:

<Input value={this.state.person.first} name="first" onChange={this.handleChange}/>

When your component is initializing it will be of value undefined e.g. <Input value={undefined}/> thus you will move from controlled state to an uncontrolled state.

Here is a simple fix:

<Input value={this.state.person.first||''} name="first" onChange={this.handleChange}/>

Upvotes: 2

Related Questions