title: React update input text value using state and make it mutable
body: <p>I want to change input text value using state and React <code>value</code> property and also make the field editable.</p>
  
  <p>My component's constructor:</p>
  
  <pre><code>constructor(props) {
      super(props);
  
      // States
      this.state = {
          value: this.props.object.subtext
      };
  
      this._handleChange = this._handleChange.bind(this);
  }
  </code></pre>
  
  <p>My <code>render()</code> function:</p>
  
  <pre><code>return (
      &lt;input
          type={this.props.object.type}
          value={this.props.object.subtext}
          onChange={this._handleChange}
      /&gt;
  );
  </code></pre>
  
  <p><code>componentDidUpdate()</code> function:</p>
  
  <pre><code>componentDidUpdate() {
      if (this.state.value !== this.props.object.subtext) {
          this.setState({value: this.props.object.subtext});
      }
  }
  </code></pre>
  
  <p>And for <code>_handleChange(e)</code> function:</p>
  
  <pre><code>_handleChange(e) {
      this.props.object.subtext = e.target.value;
      this.componentDidUpdate(); // not sure it's right or not
  }
  </code></pre>
  
  <p>The code works fine, but I'm a little bit unsure that was the best practice or not because I recalled <code>this.componentDidUpdate()</code> manually inside the event handler function. </p>
  
  <p>I did it to fix my previous bug which is the value of input component won't be updated when the state was changed.</p>
  
  <p>I want to know whether what I'm doing is right or not, any comments or answers will be appreciated.</p>