ReactJS - Warning: A component is changing an uncontrolled input of type text to be controlled

Question

I am trying to get rid off this error message, but still unsuccessfully.

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.

There's also link to the Facebook page, but I am still not sure how to figure it out.

class EditItem extends Component {
    constructor(props) {
        super(props);
        this.state = {items: ''};

        this.addItemService = new ItemService();
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount(){
    axios.get('http://localhost:3005/items/edit/'+this.props.match.params.id)
    .then(response => {
      this.setState({ items: response.data });
    })
    .catch(function (error) {
      console.log(error);
    })
  }

  handleChange = (e) => {
    let items = Object.assign({}, this.state.items);    //creating copy of object
    items.item = e.target.value;                        //updating value
    this.setState({items});
  }

  handleSubmit(event) {
    event.preventDefault(); // not sure why this
    this.addItemService.updateData(this.state.items.item, this.props.match.params.id); // service for updating the data
    this.props.history.push('/index'); // redirect
  }

  render() {
    return (
          <div className="container">
            <form onSubmit={this.handleSubmit}>
              <label>
                Edit Item:
                <input type="text" value={this.state.items.item} className="form-control" onChange={this.handleChange}/>
              </label><br/>
              <input type="submit" value="Update" className="btn btn-primary"/>
            </form>
        </div>
    );
  }
}

In the input seems to be always a not-null value, how do I fix this?

Answer 1

In the state items is defined as a string, and hence when you assign the value to text input like

<input type="text" value={this.state.items.item} className="form-control" onChange={this.handleChange}/>

You are essentially writing

<input type="text" value={undefined} className="form-control" onChange={this.handleChange}/>

for the initial render, and once the result of API call is available and items state changes to an object that contains item key, you are passing a value to input and hence converting it from uncontrolled to controlled, which is what the warning is about. In order to avoid the warning, you would simply initilise your state like

this.state = {items: { items: '' }};

or use input like

<input type="text" value={this.state.items.item || ''} className="form-control" onChange={this.handleChange}/>

Answer 2

This type of warning mainly occurs in React when you try to set the undefined value to any of the input types. You can use a conditional operator to check whether the state value is undefined or not, if it is undefined set it to a null value.

<input type="text" value={this.state.items.item !== undefined ? this.state.items.item :  ''} className="form-control" onChange={this.handleChange}/>