title: setState conditionally in react
body: <p>I know some react but I am stuck in a weird situation.</p>
  
  <p>I have two inputs and a button,
  the button should be enabled when both inputs are not empty.
  So, I used a state property for each input value and also one property telling me if both inputs have value:</p>
  
  <pre><code>this.state = {
    title: '',
    time :'', 
    enabled : false
  }
  </code></pre>
  
  <p>also I have a onChange for each input to set State accordingly:</p>
  
  <pre><code>&lt;input type="text" id="time" name="time" onChange={this.onChange.bind(this)} value={this.state.time}&gt;&lt;/input&gt;
  &lt;input type="text" id="title" name="title" onChange={this.onChange.bind(this)} value={this.state.title}&gt;&lt;/input&gt;
  </code></pre>
  
  <p>and the onChange is like this</p>
  
  <pre><code>onChange(e){
      this.setState({
          [e.target.id] : e.target.value,
          enabled : ( (this.state.title==='' || this.state.time==='' ) ? false : true)
        });
    }
  </code></pre>
  
  <p>the problem is that the setState looks at previous state and the enabled is always one step behind, so if I type X in first and Y on second, still the enabled would be false. </p>
  
  <p>I managed to solve it by using a setTimeout and taking the second line in it but it looks wrong to me. </p>
  
  <pre><code>  onChange(e){
  
      this.setState({
          [e.target.id] : e.target.value,
      });
  
      setTimeout(() =&gt; {
        this.setState({
          enabled : ( (this.state.title==='' || this.state.time==='' ) ? false : true)
      });
      }, 0);
  
    }
  </code></pre>
  
  <p>Any better solutions?</p>