title: How to access state from closure in React
body: <p>My assumption is that I try to access state from a closure.
  This does somehow not work:</p>
  
  <p><strong>Present Code:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export class CityChoice extends React.Component{
  constructor(props) {
      super(props);
      this.state={}
  }
  
  componentDidMount(){
    request
      .get('http://XXX.XXX.XX.XX:3000/get_courses')
      .set('Accept', 'application/json')
      .then((res) =&gt; {
          for (let key in res.body){
            console.log(res.body[key].city)
          }
        this.setState({courses: res.body})
          console.log("this.state.courses -&gt; " + this.state.courses)
      })
      .catch(function(err) {
        console.log(err)
      });
  }
  
  render(){
    var that = this
    return (&lt;div&gt;
              &lt;h2&gt;Wähle Deine Stadt&lt;/h2&gt;
              {
              that.state.courses.body.city.map((city, index) =&gt; (
                &lt;p&gt;&lt;Link to={{pathname: "/kurse", stadt: {city}}}&gt;&lt;Button&gt;{city}&lt;/Button&gt;&lt;/Link&gt;&lt;/p&gt;
              ))}
              }
            &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p><strong>Expected Result</strong></p>
  
  <p>Output of x Buttons named and linked to the respective cities.</p>
  
  <p><strong>Actual Result</strong></p>
  
  <p>TypeError: that.state.courses is undefined</p>