title: Trouble to fill a dropdown menu using react
body: <p>I have some problems with a project. I want to display some data, that I retreive from an API, in a dropdown menu. I used the .map() function and jsx to display everything, but nothing is working, the dropdown menu stay empty whereas a console.log(cities) show me that my array is filled.</p>
  <pre class="lang-js prettyprint-override"><code>function CitiesList(){
    var cities = citiesRequest();
    return (
      &lt;form id=&quot;cityChoice&quot;&gt;
        &lt;label for=&quot;citySelected&quot;&gt;Ville : &lt;/label&gt;
        &lt;select name=&quot;citiesList&quot; id=&quot;citySelected&quot;&gt;
          {cities.map((city) =&gt; &lt;option key={city} value={city}&gt;{city}&lt;/option&gt;)}
        &lt;/select&gt;
      &lt;/form&gt;
    );
  } 
  </code></pre>
  <p>If I change the way &quot;cities&quot; is fill for test, everything is working and the dropdown menu is filled :</p>
  <pre class="lang-js prettyprint-override"><code>function CitiesList(){
    var cities = [&quot;Berlin&quot;, &quot;Paris&quot;, &quot;London&quot;];
    return (
      &lt;form id=&quot;cityChoice&quot;&gt;
        &lt;label for=&quot;citySelected&quot;&gt;Ville : &lt;/label&gt;
        &lt;select name=&quot;citiesList&quot; id=&quot;citySelected&quot;&gt;
          {cities.map((city) =&gt; &lt;option key={city} value={city}&gt;{city}&lt;/option&gt;)}
        &lt;/select&gt;
      &lt;/form&gt;
    );
  } 
  </code></pre>
  <p>Here is entire my code if that can help :</p>
  <pre class="lang-js prettyprint-override"><code>function Header(props){
    return(
      &lt;header&gt;
        &lt;h1 className=&quot;apiTitle&quot;&gt;{props.name}&lt;/h1&gt;
        &lt;CitiesList/&gt;       
      &lt;/header&gt;
    );
  }
  
  function CitiesList(){
    var cities = citiesRequest();
    return (
      &lt;form id=&quot;cityChoice&quot;&gt;
        &lt;label for=&quot;citySelected&quot;&gt;Ville : &lt;/label&gt;
        &lt;select name=&quot;citiesList&quot; id=&quot;citySelected&quot;&gt;
          {cities.map((city) =&gt; &lt;option key={city} value={city}&gt;{city}&lt;/option&gt;)}
        &lt;/select&gt;
      &lt;/form&gt;
    );
  } 
  
  ReactDOM.render(
    &lt;Header name=&quot;Bike Mapper&quot;/&gt;,
    document.getElementById('root')
  );
    
  function citiesRequest(){
    var citiesArray = [];
    fetch(&quot;https://api.jcdecaux.com/vls/v3/contracts?apiKey=&quot;+APIKEY)
      .then((response) =&gt; response.json())
      .then(function(data){
      data.forEach(element =&gt; {
        if(element.country_code == 'FR'){
          citiesArray.push(element.name.toUpperCase());
        }
      }); 
    })
    return citiesArray;
  }
  </code></pre>
  <p>Thanks</p>