title: React Select - How to show / iterate through data from api call in option instead of hardcoding options?
body: <p>I am using react-select and I don't want to hard code the options which should be displayed, but options is data I am fetching from an api. I can't really find anything and what I was trying to do doesn't work as nothing gets displayed. Anyone knows? Thanks!!!</p>
  
  <p>api.js:</p>
  
  <pre><code>export function availableCities() {
     return axios.get('/cities').then(function (response) {
        return response.data;
     })
  }
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>import Select from 'react-select';
  import {availableCities} from '../utils/api.js';
  
  class App extends React.Component {
      constructor(props) {
      super(props);
      this.state = {
          selectedOption: '',
          clearable: true,
          cities: [],
       } 
     }
     componentDidMount() {
      availableCities()
          .then(res =&gt; {
              this.setState({
                  cities: res.Cities.name
              })
              console.log("hello", this.state.cities)
          })
     }
  
     handleChange(selectedOption) {
      this.setState({selectedOption});
     }
   render(){
      let options = this.state.cities.map(function (city) {
              return city.name;
      })
   return (
        &lt;div&gt;
             &lt;Select
                  name="form-field-name"
                  value={this.state.value}
                  onChange={this.handleChange}
                  clearable={this.state.clearable}
                  searchable={this.state.searchable}
                  options={options}                  
              /&gt;
        &lt;/div&gt;
    )
   }
  }
  </code></pre>
  
  <p>Data( this.state.cities is an array of objects and looks like:</p>
  
  <pre><code>{code: "LTS", name: "Altus", countryCode: "US", countryName: "United States", regionName: "North America", …}
  
  ...
  </code></pre>