title: Select doesn't show options
body: <p>I'm trying to load the options of a select dynamically so I create an array of options which is passed to the select.</p>
  
  <p>The code of the constructor, handle and get data is next:</p>
  
  <pre><code>constructor(){
      super();
      this.state = {
          loaded: false,
          selected_season: null,
          seasons: {},
          competitions: {},
          gameday: {}
      }
      this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange = selected_season =&gt; {
      this.setState({ selected_season });
      console.log(`Option selected:`, selected_season);
    };
  
  async getData(){
      let params = [{"###id_league###": 1}];
      let seasons = await getDataFromServer(URL_FEB_API, HOMELF1_SEASON, params);
      let gameday = await getDataFromServer(URL_FEB_API, RESULT_GAMEDAY_LF1, params);
      this.setState({
          selected_season: seasons["data"]["seasons"][0]["id"],
          seasons: seasons["data"]["seasons"],
          gameday: gameday,
          loaded: true            
      });         
  }
  
  componentDidMount(){
      this.getData();
  }
  </code></pre>
  
  <p>And the render function is:</p>
  
  <pre><code>render(){
      let gameday = this.state.loaded ? this.state.gameday["data"]["last_game_day"][0] : [];
      let season_options = () =&gt; {
          let items = this.state.seasons.map(season =&gt; {
              return{
                  value: season.id,
                  label: season.description
              }
          });
          items.map(item =&gt; {
              console.log(item);
          });
          return items;
  }
  
      return(
          &lt;div style = {{marginTop: 15 + 'px'}}&gt;
              {
                  (this.state.loaded) ?
                      &lt;Form.Row&gt;
                              &lt;Form.Label column md = "1"&gt;Temporada&lt;/Form.Label&gt;
                              &lt;Col md = "3"&gt;
                                  &lt;Form.Control as="select" 
                                      controlid = "season"
                                      options = {season_options()}
                                      value = {this.state.selected_season}
                                      onChange = {this.handleChange}
                                  /&gt;
                              &lt;/Col&gt;
                              &lt;Form.Label column md = "1"&gt;Competición&lt;/Form.Label&gt;
                              &lt;Col md = "3"&gt;
                                  &lt;Form.Control as="select" controlid = "season"&gt;
                                      &lt;option&gt;Selecciona Competición&lt;/option&gt;
                                      &lt;option&gt;...&lt;/option&gt;
                                  &lt;/Form.Control&gt;
                              &lt;/Col&gt;
                              &lt;Form.Label column md = "1"&gt;Jornada&lt;/Form.Label&gt;
                              &lt;Col md = "3"&gt;
                                  &lt;Form.Control as="select" controlid = "season"&gt;
                                      &lt;option&gt;Selecciona Jornada&lt;/option&gt;
                                      &lt;option&gt;...&lt;/option&gt;
                                  &lt;/Form.Control&gt;
                              &lt;/Col&gt;
                      &lt;/Form.Row&gt;
                  :
                  ""  //If data is not loaded -&gt; Don't do anything!!!
              }     
  );
  </code></pre>
  
  <p>Before to return the array items, I write the content in console to check the content and I've got this:</p>
  
  <p><a href="https://i.stack.imgur.com/26V6J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/26V6J.png" alt="enter image description here"></a></p>
  
  <p>So, the array is not empty. But in the view I don't load anything in the select.</p>
  
  <p><a href="https://i.stack.imgur.com/n4vR0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n4vR0.png" alt="enter image description here"></a></p>
  
  <p>The, what am I doing wrong? Where is my mistake? I don't understand why my select is not loaded with the conten of the array returned by the function season_options();</p>
  
  <p><strong>Edit I:</strong></p>
  
  <p>I have modified my initial code so insted of return an array of json objects I return an array of strings with the code of each option. </p>
  
  <p>Now, my code in render method is like that:</p>
  
  <pre><code>render(){
      let gameday = this.state.loaded ? this.state.gameday["data"]["last_game_day"][0] : [];
      const season_options = () =&gt; {
          let items = this.state.seasons.map(season =&gt; {
              return("&lt;option value = " + season.id + "&gt;" +  season.description + "&lt;/option&gt;");
          });
          items.map(item =&gt; {
              console.log(item);
          });
          return items;
      };
  
      return(
          &lt;div style = {{marginTop: 15 + 'px'}}&gt;
              {
                  (this.state.loaded) ?
                      &lt;Form.Row&gt;
                              &lt;Form.Label column md = "1"&gt;Temporada&lt;/Form.Label&gt;
                              &lt;Col md = "3"&gt;
                                  &lt;Form.Control as="select" 
                                      controlid = "season"
                                      value = {this.state.selected_season}
                                      onChange = {this.handleChange}
                                  &gt;
                                      {season_options()}
                                  &lt;/Form.Control&gt;
                              &lt;/Col&gt;
                      &lt;/Form.Row&gt;
                  :
                  ""  //If data is not loaded -&gt; Don't do anything!!!
              }     
         &lt;/div&gt;
  )}
  </code></pre>
  
  <p>And, I check the code of the page I've got this:</p>
  
  <p><a href="https://i.stack.imgur.com/QAOep.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QAOep.png" alt="enter image description here"></a></p>
  
  <p>All the options appears inside the select, but in the select there is nothing!!!</p>
  
  <p>What's happend? Why the options are not loaded in the select? :S</p>
  
  <p><strong>Edit II (Solution):</strong></p>
  
  <p>Finally, following the advice of BearCoder this is the code of render method which works correctly:</p>
  
  <pre><code>render(){
      let gameday = this.state.loaded ? this.state.gameday["data"]["last_game_day"][0] : [];
      const season_options = () =&gt; {
          let items = this.state.seasons.map(season =&gt; {
              return(&lt;option key = {season.id} value = {season.id}&gt;{season.description}&lt;/option&gt;);
          });
          return items;       
      };
  
      const Header = () =&gt; 
          &lt;h4 style={{ borderRadius: '0.25em', textAlign: 'center', color: '#FFFFFF', backgroundColor: '#091e36', padding: '0.5em' }}&gt;
              Liga DIA /  {gameday.name} / Jornada {gameday.num_jornada}
          &lt;/h4&gt;
  
      return(
          &lt;div style = {{marginTop: 15 + 'px'}}&gt;
              {
                  (this.state.loaded) ?
                      &lt;Form.Row&gt;
                              &lt;Form.Label column md = "1"&gt;Temporada&lt;/Form.Label&gt;
                              &lt;Col md = "3"&gt;
                                  &lt;Form.Control as="select" 
                                      controlid = "season"
                                      value = {this.state.selected_season}
                                      onChange = {this.handleChange}
                                  &gt;
                                      {season_options()}
                                  &lt;/Form.Control&gt;
                              &lt;/Col&gt;
                      &lt;/Form.Row&gt;
                  :
                  ""  //If data is not loaded -&gt; Don't do anything!!!
              }                       
          &lt;/div&gt;        
      )
  }
  </code></pre>
  
  <p>Now, how you can see in this screep cap the select is loaded correctly with the data:</p>
  
  <p><a href="https://i.stack.imgur.com/vpPYP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vpPYP.png" alt="enter image description here"></a></p>
  
  <p>The error was to return the options like a string. These options have to been returned without quotes: <code>*return(&lt;option key = {season.id} value = {season.id}&gt;{season.description}&lt;/option&gt;)*</code></p>
  
  <p>Therefore, you've got an array not of strings but <code>*&lt;option key = x value = x&gt;description&lt;/option&gt;*</code></p>