title: ReactJS - Warning: A component is changing an uncontrolled input of type text to be controlled
body: <p>I am trying to get rid off this error message, but still unsuccessfully.</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>There's also link to the Facebook page, but I am still not sure how to figure it out.</p>
  
  <pre><code>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 =&gt; {
        this.setState({ items: response.data });
      })
      .catch(function (error) {
        console.log(error);
      })
    }
  
    handleChange = (e) =&gt; {
      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 (
            &lt;div className="container"&gt;
              &lt;form onSubmit={this.handleSubmit}&gt;
                &lt;label&gt;
                  Edit Item:
                  &lt;input type="text" value={this.state.items.item} className="form-control" onChange={this.handleChange}/&gt;
                &lt;/label&gt;&lt;br/&gt;
                &lt;input type="submit" value="Update" className="btn btn-primary"/&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>In the input seems to be always a not-null value, how do I fix this?</p>