title: Dynamic React Select with Axios
body: <p>I'm just starting out with adding some React to my Ruby on Rails front end.</p>
  
  <p>I have two data model called <code>coffee_beans</code> and <code>countries</code>.</p>
  
  <p>I want to add a select dropdown on a form for <code>coffee_beans</code> that pulls in the country, both <code>id</code> and <code>country_name</code> fields. I need to submit the id to the <code>coffee_beans</code> table.</p>
  
  <p>I am able to retrieve the data via axios just fine, but I'm struggling to get the data to show in my dropdown.  </p>
  
  <p>I am using React-Select.</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  import Select from 'react-select';
  
  class Country extends React.Component {
      constructor() {
          super();
    }
  
    componentDidMount() {
      axios.get(`/countries.json`)
        .then(res =&gt; {
          const countries = res.data;
          this.setState({ countries });
        })
    }
  
    render() {
      let optionItems = countries.map(countries =&gt; 
          &lt;option key={countries.id}&gt;{countries.country_name}&lt;/option&gt;
      );
  
      return (
          &lt;div className=""&gt;
          &lt;label htmlFor="coffee_beans_countries"&gt;Country&lt;/label&gt;
              &lt;Select id="country" name="coffee_beans[countries]" options={optionItems} /&gt;
          &lt;/div&gt;
      )
    }
  }
  
  export default Country
  </code></pre>
  
  <p><strong>rendered element</strong></p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import Country from 'Country'
  
  document.addEventListener('turbolinks:load', function() {
      var element = document.getElementById("country-component");
      ReactDOM.render(&lt;Country /&gt;, element);
  });
  </code></pre>
  
  <p><strong>Update</strong>
   I now have the below code, but am getting the error:</p>
  
  <blockquote>
    <p>warning.js:33 Warning: Can only update a mounted or mounting
    component. This usually means you called setState, replaceState, or
    forceUpdate on an unmounted component. This is a no-op.</p>
  </blockquote>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  import Select from 'react-select';
  
  class Country extends React.Component {
      state = {
          countries: []
        }
  
    componentDidMount() {
      axios.get(`/countries.json`)
        .then(res =&gt; {
          const countries = [];
          this.setState({ countries });
        });
        console.log(countries)
    }
  
    render() {
      let optionItems = this.state.countries.map(countries =&gt; 
          &lt;option key={countries.id}&gt;{countries.country_name}&lt;/option&gt;
      );
  
      return (
          &lt;div className=""&gt;
          &lt;label htmlFor="coffee_beans_countries"&gt;Country&lt;/label&gt;
              &lt;Select id="country" name="coffee_beans[countries]" options={optionItems} /&gt;
          &lt;/div&gt;
      )
    }
  }
  
  export default Country
  </code></pre>