title: How to use response data from ajax call in react?
body: <p>I have just started with learning reactjs and trying to retrieve data through an ajax call. The component looks like this:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import $ from 'jquery';
  
  class App extends React.Component {
     // myTitle='';
  
      constructor() {
          super();
          this.state = {val: 0};
          this.update = this.update.bind(this);
      }
  
      update() {
          var root = 'http://jsonplaceholder.typicode.com';
          $.ajax({
              url: root + '/posts/1',
              method: 'GET'
          }).then(function (data) {
              this.state.val = data.title;
          });
  
          console.log(this.state);
      }
  
      componentWillMount() {
          console.log('mounting')
      }
  
      render() {
          console.log('rendering!')
          return &lt;button onClick={this.update}&gt;{this.state.val}&lt;/button&gt;
      }
  
      componentDidMount() {
          console.log('mounted')
      }
  
      componentWillUnmount() {
          console.log('bye!')
      }
  }
  </code></pre>
  
  <p>When the ajaxcall comes back it returns an error where the state.val statement is:</p>
  
  <pre><code>jQuery.Deferred exception: Cannot set property 'val' of undefined TypeError: Cannot set property 'val' of undefined
      at Object.&lt;anonymous&gt; (http://localhost:3000/08-lifecycle-mounting/index.js:28958:33)
      at mightThrow (http://localhost:3000/08-lifecycle-mounting/index.js:32563:30)
      at process (http://localhost:3000/08-lifecycle-mounting/index.js:32631:13) 
  </code></pre>
  
  <p>How can I update the state and use the returning data from the ajax call?</p>