title: React-select and axios issue
body: <p>This is probably related to me not understanding how (very strange) JavaScript works, but I really don't understand why this is the case. I have this piece React/React-select code, almost verbatim from the react-select readme:</p>
  
  <pre class="lang-js prettyprint-override"><code>  class Status extends Component {
      constructor(props) {
          super(props)
          this.state = {
            selectedOption: null,
          }
          this.statusOptions = [];
      }
      handleChange = (selectedOption) =&gt; {
          this.setState({ selectedOption });
          console.log(`Option selected:`, selectedOption);
      }
      componentDidMount = () =&gt; {
          console.log(this.statusOptions);
              axios.get(host+'/StatusList')
                  .then((response) =&gt; {
                      for(var i = 0; i &lt; response.data.status_list.length; i++) {
                          this.statusOptions.push({value: response.data.status_list[i][0], label: response.data.status_list[i][1]});
                      }
                  })
                  .catch((error) =&gt;{
                      console.log(error)
                  })
                  .then(() =&gt;{
  
                  });
  
      }
      render() {
          const { selectedOption } = this.state;
  
          return (
              &lt;Select
                  value={selectedOption}
                  onChange={this.handleChange}
                  options={this.statusOptions}
              /&gt;
          );
      }}
  </code></pre>
  
  <p>This does not populate my react-select list: However, moving the list/array initialization to <code>componentDidMount</code> makes it work. Why??</p>
  
  <pre class="lang-js prettyprint-override"><code>  class Status extends Component {
      constructor(props) {
          super(props)
          this.state = {
            selectedOption: null,
          }
      }
      handleChange = (selectedOption) =&gt; {
          this.setState({ selectedOption });
          console.log(`Option selected:`, selectedOption);
      }
      componentDidMount = () =&gt; {
          this.statusOptions = [];
          console.log(this.statusOptions);
              axios.get(host+'/StatusList')
                  .then((response) =&gt; {
                      for(var i = 0; i &lt; response.data.status_list.length; i++) {
                          this.statusOptions.push({value: response.data.status_list[i][0], label: response.data.status_list[i][1]});
                      }
                  })
                  .catch((error) =&gt;{
                      console.log(error)
                  })
                  .then(() =&gt;{
  
                  });
  
      }
      render() {
          const { selectedOption } = this.state;
  
          return (
              &lt;Select
                  value={selectedOption}
                  onChange={this.handleChange}
                  options={this.statusOptions}
              /&gt;
          );
      }}
  </code></pre>