title: Choosing options conditionally for reusable Select Component
body: <p>I'm using react-select and am creating a reusable Select Component that will conditionally choose which options list to render in the proper <code>select</code> element by checking the <code>name</code> attribute.</p>
  <p>When I code it using the <code>select</code> html, <code>options</code> renders fine.  I've added an options element to have a placeholder for the list.
  This works, but I would also like to try creating it with <code>react-select</code>
  The problem is, the options arent rendering, but the correct list chosen after the conditional is met shows when I <code>console.log</code>.</p>
  <p>Any thoughts as to the error I'm making when trying with <code>react-select</code>?</p>
  <p>The two imported data lists are, one is an object of key, value pairs and the 2nd is an array of single values.</p>
  <p>Code as follows:</p>
  <pre><code>import React from 'react';
  import Select from 'react-select';
  import PropTypes from 'prop-types';
  import {countriesData1} from '../data/countries-data.js';
  import {stateData3} from '../data/states-data.js';
  
  class SelectComp extends React.Component {
    static propTypes = {
      selectCountry: PropTypes.string,
      handleChange: PropTypes.func
    }
  
    state = {
        countryList: countriesData1,
        stateList: stateData3,
      }
    
    render() {
      const {stateList, countryList} = this.state;
  
      const optionsCountry = Object.entries(countryList).map((entry, _) =&gt; {
        let key = entry[0]
        let value = entry[1]
        return &lt;option key={key}
                       value={value}&gt;
                         {value}
                &lt;/option&gt;
       });
  
      const optionsState = stateList.map(data =&gt; {
        return &lt;option key={data}
                value={data}&gt;
                  {data}
               &lt;/option&gt;
      });
  
      let options;
      if(this.props.name === &quot;Country&quot;) {
        options = optionsCountry;
      } else {
        options = optionsState;
      }
     
      return (
        &lt;div&gt;
          &lt;Select name={`${this.props.name}`} 
                className={`select-options select-${this.props.name}`}
                onChange={this.props.handleChange}
                placeholder= {this.props.name === &quot;Country&quot; ? &quot;Select Country&quot; : &quot;Select State&quot;}
                options={options}
                /&gt;  
  
          &lt;select name={`${this.props.name}`} 
                  className={ `select-options select-${this.props.name}` }
                  onChange={this.props.handleChange}&gt;
                  &lt;option value=&quot;&quot;
                          hidden&gt; Select {this.props.name}&lt;/option&gt;
                     {options}     
                 {options} 
          &lt;/select&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default SelectComp;
  </code></pre>
  <p>Thank you,
  Lee</p>