title: ReactJS Cannot read property setState of undefined
body: <p>I am new to ReactJS, and somewhat understand that this question is duplicated to numeral questions in SOF.</p>
  
  <p>But I hope someone can give me some directions and clarifications on some concepts of React.</p>
  
  <p>What I want to do is simply get data from remote REST API using <code>axios</code> or <code>isomorphic-fetch</code> before the screen is loaded.</p>
  
  <p>However, I saw quite a lot of similar React tutorials, I still did not get the point.  </p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import axios from 'axios'
  
  // import InputRow from './components/InputRow';
  import './App.css';
  
  // require('es6-promise').polyfill();
  // require('isomorphic-fetch');
  
  class App extends Component {
  
   constructor(props) {
    super(props);
  
    const app_id = '&lt;my_app_id&gt;';
  
    const version = 0.1;
    this.luisURL = `https://westus.api.cognitive.microsoft.com/luis/api/v2.0/apps/${app_id}/versions/${version}`;
  
    // this.getLUISIntent = this.getLUISIntent.bind(this);
  
    this.state = {
     intentOptions: [],
     utterance: '',
     intent: ''
    };
   }
  
   getLUISIntent = () =&gt; {
    const subscription_key = '&lt;my_subscription_key&gt;';
  
    const URL = this.luisURL + '/intents';
  
    return axios.get(URL, {
     headers: {
      "Content-Type": 'application/json',
      "Ocp-Apim-Subscription-Key": subscription_key
     },
    })
    .then(function(res){
     this.setState({intentOptions: res.data});
    });
   }
  
   componentWillMount = () =&gt; {
    // this.setState({
    //  intentOptions: this.getLUISIntent()
    // });
   }
  
   componentDidMount = () =&gt; {
    this.getLUISIntent();
   }
  
   componentDidUpdate = (prevProps, prevState) =&gt; {
    console.log("state: ", this.state);
    // this.submitToLUIS();
   }
  
   shouldComponentUpdate = (nextProps, nextState) =&gt; {
    return true;
   }
  
   submitToLUIS = () =&gt; {
    console.log("Submit to LUIS: ", this.state);
   };
  
   setIntent = (e) =&gt; {
    this.setState({intent: e.target.value});
   };
  
   setUtterance = (e) =&gt; {
    this.setState({utterance: e.target.value});
   };
  
   render() {
    return (
     &lt;div className="App"&gt;
      &lt;div className="container"&gt;
       &lt;div className="row"&gt;
        &lt;div className="col-sm-4"&gt;Utterance&lt;/div&gt;
        &lt;div className="col-sm-4"&gt;Intent&lt;/div&gt;
        &lt;div className="col-sm-4"&gt;&lt;/div&gt;
       &lt;/div&gt;
       &lt;div className="row"&gt;
        &lt;div className="col-sm-4"&gt;
         &lt;input className="form-control utterance" type="text" onChange={this.setUtterance} /&gt;
        &lt;/div&gt;
        &lt;div className="col-sm-4"&gt;
         &lt;select className="form-control intent" onChange={this.setIntent}&gt;
          &lt;option key="intent_defualt" value=""&gt;Select...&lt;/option&gt;
          {this.state.intentOptions.map((obj, i) =&gt;
           &lt;option key={obj.id} value={obj.id}&gt;{obj.name}&lt;/option&gt;
          )}
         &lt;/select&gt;
        &lt;/div&gt;
        &lt;div className="col-sm-4"&gt;
         &lt;button className="btn btn-primary" onClick={this.submitToLUIS}&gt;Create&lt;/button&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
          &lt;/div&gt;
       );
     }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here are my questions:</p>
  
  <ul>
  <li>I want to load the list before showing the whole UI, what is missing in this code?</li>
  <li>Is it correct here to use arrow function in <code>getLUISIntent</code>?</li>
  <li>Can I use <code>async/await</code> in <code>getLUISIntent()</code>?</li>
  <li>To me, <code>async/await</code> means waiting for the response from function before executing the next "line".  Is this concept correct?</li>
  <li>If I need to write an additional <code>this.__my_fancy_function__ = this.__my_fancy_function__.bind(this)</code> to use a class function, using arrow function seems writes less code and more readable, why not everyone use it?</li>
  <li>Are there any <code>Fetch remote API before loading anything using ReactJS tutorial no splitting different component but showing everything in only single App.js No BS so that everyone can see how a REST API-simple ReactJS app is run</code> tutorial out there?  If there is no such thing I would like to write it.  But before that I hope someone can help clear my thought first.</li>
  </ul>
  
  <p>Thank you very much in advance for your kind help.  </p>