title: How to set timeout on event onChange
body: <p>I have a gallery that show images, and i have a search textbox
  Im Trying to use Timeout on Input event to prevent the api call on every letter im typing :
  I try to handle the event with doSearch function onChange: but now I cant write anything on the textbox and it cause many errors
  Attached to this session the app and gallery components</p>
  
  <p>Thanks in advance</p>
  
  <pre><code>class App extends React.Component {
    static propTypes = {
    };
  
    constructor() {
      super();
      this.timeout =  0;
      this.state = {
        tag: 'art'
      };
    }
  
  
    doSearch(event){
      var searchText = event.target.value; // this is the search text
      if(this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(function(){this.setState({tag: event.target.value})} , 500);
    }
  
    render() {
      return (
        &lt;div className="app-root"&gt;
          &lt;div className="app-header"&gt;
            &lt;h2&gt;Gallery&lt;/h2&gt;
            &lt;input className="input" onChange={event =&gt; this.doSearch(event)} value={this.state.tag}/&gt;
          &lt;/div&gt;
          &lt;Gallery tag={this.state.tag}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>This is the Gallery class:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import axios from 'axios';
  import Image from '../Image';
  import './Gallery.scss';
  
  class Gallery extends React.Component {
    static propTypes = {
      tag: PropTypes.string
    };
  
    constructor(props) {
      super(props);
      this.state = {
        images: [],
        galleryWidth: this.getGalleryWidth()
  
      };
    }
  
    getGalleryWidth(){
      try {
        return document.body.clientWidth;
      } catch (e) {
        return 1000;
      }
    }
    getImages(tag) {
      const getImagesUrl = `services/rest/?method=flickr.photos.search&amp;api_key=522c1f9009ca3609bcbaf08545f067ad&amp;tags=${tag}&amp;tag_mode=any&amp;per_page=100&amp;format=json&amp;safe_search=1&amp;nojsoncallback=1`;
      const baseUrl = 'https://api.flickr.com/';
      axios({
        url: getImagesUrl,
        baseURL: baseUrl,
        method: 'GET'
      })
        .then(res =&gt; res.data)
        .then(res =&gt; {
          if (
            res &amp;&amp;
            res.photos &amp;&amp;
            res.photos.photo &amp;&amp;
            res.photos.photo.length &gt; 0
          ) {
            this.setState({images: res.photos.photo});
          }
        });
    }
  
    componentDidMount() {
      this.getImages(this.props.tag);
      this.setState({
        galleryWidth: document.body.clientWidth
      });
    }
  
    componentWillReceiveProps(props) {
      this.getImages(props.tag);
    }
  
    render() {
      return (
        &lt;div className="gallery-root"&gt;
          {this.state.images.map((dto , i) =&gt; {
            return &lt;Image key={'image-' + dto.id+ i.toString()} dto={dto} galleryWidth={this.state.galleryWidth}/&gt;;
          })}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>