title: Why can't I change my input value in React even with the onChange listener
body: <p>I am quite new to React and after going through some tutorials, I was trying the below code of mine.</p>
  <p>I made one component, passed props to it from a store, on <code>componentWillMount</code> I make a new state for component. Rendering is fine till now.</p>
  <p>Next I bound my <code>state</code> to value of an input box and I have <code>onChange</code> listener as well. Still, I can't change my values in the field.</p>
  <p>Since, I am from Angular background, I am assuming binding input's value to state like below will automatically update the property <code>name</code> in <code>state</code> object. Am I wrong here?</p>
  <pre><code>componentWillMount(){
      this.setState({
          updatable : false,
          name : this.props.name,
          status : this.props.status
      });
  }
  
  //relevant DOM from component's render function
  &lt;input className=&quot;form-control&quot; type=&quot;text&quot; value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange.bind(this)}/&gt;
  
  onTodoChange(){
      console.log(this);
      //consoling 'this' here, shows old values only.
      //not sure how and even if I need to update state here.
      // Do I need to pass new state to this function from DOM
      //TODO: send new data to store
  }
  </code></pre>
  <p>My <code>onTodoChange</code> function console the value of <code>this</code> which has same value of state as while initializing. How do I go about changing state by typing in input boxes, so that I can send them to the stores?</p>