title: Input doesn't clear content even after state is modified in React
body: <p>I have an input field with a &quot;close (x)&quot; icon next to it. I am handling state as the value in the input field changes, and once the user hits <kbd>Enter</kbd> I clear the value in the state. However, after the re-rendering (because of state change) the previous input still remains there in the input field.</p>
  <pre><code>constructor(props) {
      super(props);
      this.state = {
        filterSearchQuery: null, filterSearch: null}
  
      this.handleSearchInput = this.handleSearchInput.bind(this);
      this.handleSearchReset = this.handleSearchReset.bind(this);
  }
  
  handleSearchInput(e) {
       //   e.preventDefault();
      let val = e.target.value;
      if (e.keyCode == 13)
        this.setState({ entries: [], filterSearchQuery: null, filterSearch: val, pageIndex: 0, hasMore: false }, this.loadEntries);
      else
        this.setState({ filterSearchQuery: val });
  }
  
  handleSearchReset(e) {
      //e.preventDefault();
      this.setState({ entries: [], pageIndex: 0, hasMore: false, filterSearchQuery: null, filterSearch: null }, this.loadEntries);
  }
  </code></pre>
  <p>render and return :</p>
  <pre><code>&lt;input type=&quot;text&quot; className=&quot;outline-none flex-fill pt-0_2em pb-0_2em border-white border-none bg-color-white color-black font-12px font-weight-bold opacity-0_9&quot; value={this.state.filterSearchQuery} placeholder=&quot;Search in results.&quot; onKeyUp={(e) =&gt; this.handleSearchInput(e)} onChange={(e) =&gt; this.handleSearchInput(e)} autoFocus={true} /&gt;
  {
      (this.state.filterSearchQuery &amp;&amp; this.state.filterSearchQuery.length &gt; 0) &amp;&amp;
      &lt;div className=&quot;&quot;&gt;
      &lt;button type=&quot;button&quot; className=&quot;close&quot; aria-label=&quot;Close&quot; onClick={this.handleSearchReset}&gt;
          &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
   &lt;/div&gt;
  }
  </code></pre>
  <p>The <code>handleSearchReset</code> function works and sets the state as expected. Both the <code>filterSearch</code> and <code>filterSearchQuery</code> values are set properly. However, after re-rendering the <code>filterSearchQuery</code> value still is visible in the input field. How can I overcome this or where am I missing?</p>