title: reactJS dynamic drop down populated with map function
body: <p>I am trying to render a simple drop down with numbers from 1 to 100.  I create an object with an array as its only element.  I populate each array element with a value and then I try to map the object to generate the drop down items.  This is the code I am executing:</p>
  
  <pre><code>renderPercent = () =&gt; {
      let obj = {
          array: []
      };
      for (var l=0;l&lt;100;l++){
          obj.array[l] = l+1;
      }
      console.log("obj: ", obj);
      let optionItems = obj.array.map((item) =&gt;
          &lt;option key={item}&gt;{item}&lt;/option&gt;
      );
      return (
          &lt;div&gt;                
              &lt;div className="row"&gt;
                  &lt;div className="col-9 text-left"&gt;
                      &lt;label&gt;Select the percent to transfer&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div className="col-2 text-left"&gt;
                      &lt;select&gt;
                          {optionItems}
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div className="col-1 text-left"&gt;
                      &lt;label&gt;&amp;nbsp;&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>I modified the optionItems map function as suggested.  This is what now is generated when this screen is rendered:</p>
  
  <p><a href="https://i.stack.imgur.com/A1MbW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A1MbW.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the map function is now populating my drop down.  However, the dropdown goes below the end of the device.  Is this just something that is a bug when viewing in Chrome with developer tools?  And the other thing I noticed is that the numbers in the dropdown are a larger font than the reset of the page.  Before I click on the dropdown arrow, the value 1 shows in the drowdown and that is the correct size, but as soon as I expand the drop down, the numbers seem much larger.  Why would that be?</p>
  
  <p>Again, thanks to the stackoverflow community!</p>