React Input elements should not switch from uncontrolled to controlled (or vice versa)

Question

I have the next constructor in a React Component

constructor(props){
    super(props);
    this.state = {
      socket:null,
      state:'main',
      match:{
        creationDate:'',
        host:'',
        players:[]
      },
      name1:'',
      name2:'',
    }

Then I define an Input like this:

<Input style={{width: 100 + '%'}} readOnly value={this.state.match.host}></Input>

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

As far as I know it's just needed to define the initial value of the variable state as I did.

Thanks for the help.

Answer 1

It seems like the value you are providing the input changes from undefined to some string. This makes React think you are switching between an uncontrolled input (value = undefined) to a controlled one.

One workaround is to switch the value to defaultValue, and to add a key prop with the same value like this:

<Input style={{width: 100 + '%'}} readOnly defaultValue={this.state.match.host} key={this.state.match.host}></Input>

The changing key will make sure that the input is re-rendered with the updated defaultValue each time it changes.

Alternatively, try and figure out why you are passing undefined to the input value at the first place.