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.

What does that Input element look like? Where does it come from? — Donovan Hiland

itaydafna itaydafna · Accepted Answer · 2020-03-27T19:14:25

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.

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

1 Answers