Categories
JavaScript React

[Warning] A component is changing an uncontrolled input of type text to be controlled.

https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro

Cause:

An input field will become uncontrolled when the initial value is undefined

<input
       value={this.state.fields["name"]}
       ...
      />

Solution:

// Method 1: define an init value
this.state = { fields: {name: ''} }

// Method 2: define the value by using short-circuit evaluation
value={this.state.fields.name || ''} 

Leave a comment