title: React set-state doesn't update in fetch success function (on key up event)
body: <p>I have a search <code>component</code> containing an input on which I defined a <code>key up event handler function</code> for fetching data based on entered string. As you can see below:</p>
  
  <pre><code>class SearchBox extends Component {
      constructor(props) {
          super(props);
          this.state = {
              timeout: 0,
              query: "",
              response: "",
              error: ""
          }
          this.doneTypingSearch = this.doneTypingSearch.bind(this);
      }
      doneTypingSearch(evt){
          var query = evt.target.value; 
          if(this.state.timeout) clearTimeout(this.state.timeout);
          this.state.timeout = setTimeout(() =&gt; {
              fetch('https://jsonplaceholder.typicode.com/todos/1/?name=query' , {
                  method: "GET"
              })
              .then( response =&gt; response.json() )
              .then(function(json) {
                  console.log(json,"successss") 
                  //Object { userId: 1, id: 1, title: "delectus aut autem", completed: false }  successss
  
                  this.setState({
                      query: query,
                      response: json
                  })
                  console.log(this.state.query , "statesssAfter" )
              }.bind(this))
              .catch(function(error){
                  this.setState({
                      error: error
                  })
              });
          }, 1000);
      }
    render() {
      return (
          &lt;div&gt;
              &lt;input type="text" onKeyUp={evt =&gt; this.doneTypingSearch(evt)} /&gt;        
              &lt;InstantSearchResult data={this.state.response} /&gt; 
          &lt;/div&gt;
          );
      }
  }
  export default SearchBox;
  </code></pre>
  
  <p>The problem is the <code>setState</code> which I used in the second <code>.then()</code>. The response won't update . I want to update it and pass it to the <code>InstantSearchResult</code> component which is imported here. Do you have any idea where the problem is ?</p>
  
  <p><strong>Edit - Add InstantSearchResult component</strong></p>
  
  <pre><code>class InstantSearchBox extends Component {
      constructor(props) {
          super(props);
          this.state = {
              magicData: ""
          }
      }
      // Both methods tried but got error =&gt;  Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
      componentDidUpdate(props) {
          this.setState({
              magicData: this.props.data
          })
      }
      shouldComponentUpdate(props) {
          this.setState({
              magicData: this.props.data
          })
      }
      render() {
          return (
              &lt;h1&gt;{ this.state.magicData}&lt;/h1&gt;
          );
      }
  }
  export default InstantSearchBox;
  </code></pre>