title: this.setState is not a function
body: <p>I have the following component, which maintains the state that gets updated when the event is fired on the an specific element and when the state is updated it is passed down as a prop to another component. I am currently trying why i get the following error "this.setState is not a function", its most likely not binded to the right context. But i am unsure of this, am i doing this right?   </p>
  
  <pre><code>export default class SearchBox extends Component{
  
      constructor(){
          super()
          console.log("search box imported");
          this.state = {
              results:[]
          };
      }
  
      //this.setState({result: arrayExample})
  
      searchGif(event) {
          if(event.keyCode == 13){
              let inputVal = this.refs.query.value;
              let xhr = new XMLHttpRequest();
              xhr.open('GET', 'http://api.giphy.com/v1/gifs/search?q='+inputVal+'&amp;api_key=dc6zaTOxFJmzC', true);
              xhr.onreadystatechange = function(){
                  if(xhr.readyState == 4 &amp;&amp; xhr.status == 200){
                      // this.response = JSON.parse(xhr.responseText);
                      let returnedObj = JSON.parse(xhr.responseText);
                      //console.log(returnedObj.data);
                      let response = returnedObj.data.map(function(record){
                          let reformattedArray =  {   key: record.id,
                                                      id: record.id,
                                                      thumbnailUrl: record.images.fixed_height_small_still.url
                                                  };
                                                  return reformattedArray;
                      });
                      console.log(response);
                      this.setState({results: response});
                  }
              }
              xhr.send();
          }
      }
  
  
      render(){
  
          return(
              &lt;div&gt;   
                  &lt;input className="search-input" ref="query" onKeyDown={this.searchGif.bind(this)} name="search" placeholder="Search"/&gt;
                  &lt;GifSwatch data={this.state.results} /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>EDIT:</strong> 
  I just realized the context gets changed when "onreadyStateChange" function, so i did the following in searchGif</p>
  
  <pre><code>searchGif(){
     //other logic
     var self = this;
     xhr.onreadystatechange = function(){
      //ajax logic
      self.setState({results: repsonse});
     }
  }
  </code></pre>