title: how to handle change on the input field,and debounce function reactjs
body: <p>I want to be able to change the value attribute inside an input tag dynamically  but also to set the initial value to some text </p>
  
  <p>I would like to send an API request only after the user stopped typing, therefore I'm using a debounce function, the problem is I'm not able to keep updating the input field as the user type. </p>
  
  <pre><code>class App extends React.Component {
    static propTypes = {
    };
  
    constructor() {
      super();
      this.state = {
        tag: 'art',
        searchTerm: 'art'
  
      };
    }
  
    callApi = debounce ((searchTerm) =&gt;{
          this.setState({searchTerm:searchTerm});
    },5000) 
  
    onSearchHandler = searchTerm =&gt;{
      this.setState({tag:searchTerm})
      this.callApi(searchTerm)
    }
  
  
    render() {
      return (
        &lt;div className="app-root"&gt;
          &lt;div className="app-header"&gt; 
            &lt;h2&gt;Flickr Gallery&lt;/h2&gt;
            &lt;input 
                className="app-input" 
                onChange={event =&gt; {this.onSearchHandler(event.target.value)}}
                value ={this.state.tag}
                /&gt;
          &lt;/div&gt;
          &lt;Gallery tag={this.state.searchTerm}/&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>if I'll delete the value attribute from the input field then everything is fine, so how can I add the value attribute and still change it on demand, but send the request only after X Seconds?</p>