title: Value property on input field changes after a second user interaction - React
body: <p>I have a form with two input elements - one for name (type="text") and one for age (type="number"). I manage the form state in the parent component. I have my handler methods and everything set up. The form state changes when user types. Also the input value property on the name field receives its value based on the current state, but the number field does not receive it while user types but on a second interaction with the page (a click somewhere else let's say) <br>
  Here is my Form component:</p>
  
  <pre><code>const Form = (props) =&gt; {
      return (
      &lt;div className="col-md-4 form"&gt;
        &lt;form id="myForm"&gt;
          &lt;div className="form-group"&gt;
            &lt;label&gt;Please, enter your name&lt;/label&gt;
            &lt;input onChange={props.inputChanged} id="name" type="text" className="form-control" name="name"
                   placeholder="Name" value={props.data.name}/&gt;
          &lt;/div&gt;
          &lt;div className="form-group"&gt;
            &lt;label&gt;How old are you?&lt;/label&gt;
            &lt;input onChange={props.inputChanged} id="age" type="number" className="form-control" name="age"
                   placeholder="Age" value={props.data.age}/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And the parent class based component which owns the state:</p>
  
  <pre><code>class DbControls extends Component {
  
    //INITIAL STATE
    state = {
      name: '',
      age: '',
      greeting: 'hello',
      role: 'admin'
    }
  
    //HANDLE USER INPUT FOR NAME AND AGE
    inputHandler = (e) =&gt; {
      if (e.target.id === 'name') {
        this.setState({name: e.target.value})
      } else if (e.target.id === 'age') {
        this.setState({age: e.target.value})
      }
    }
  
    //HANDE USER PREFERENCES FOR GREETING AND ROLE
    selectHandler = (e) =&gt; {
      if (e.target.id === 'greet') {
        this.setState({greeting: e.target.value})
      } else if (e.target.id === 'role') {
        this.setState({role: e.target.value})
      }
    }
  
  
    render() {
      return (
        &lt;div className="container-fluid"&gt;
          &lt;div className="row"&gt;
            &lt;Form data={this.state} inputChanged={this.inputHandler} selectChanged={this.selectHandler}/&gt;
            &lt;div className="col-md-6 table"&gt;
              &lt;Table tableFor="Admins table"/&gt;
              &lt;Table tableFor="Moderators table"/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I am not sure if this is an actual problem but I was just curious what might be the reason for that behavior?</p>