title: ReactJS: How to dynamically render Material-UI's <MenuItem/> inside <DropDownMenu/>?
body: <p>Using ReactJS + Material-UI, I have an array called <code>colors</code> and contains strings of different colors. Say for example the array <code>colors</code> has 3 color strings: "white", "blue", "green. Then I would like to render each color string has a <code>&lt;MenuItem/&gt;</code> inside a <code>&lt;DropDownMenu/&gt;</code> (<a href="http://www.material-ui.com/#/components/dropdown-menu" rel="noreferrer">http://www.material-ui.com/#/components/dropdown-menu</a>). And once a <code>&lt;MenuItem/&gt;</code> is selected, I'd like to console log that particular color like, say chose "white": console.log("white"). </p>
  
  <p>So I used .forEach yet the  does not show any strings and it is empty. What could I be doing wrong? </p>
  
  <p>Here is the code:</p>
  
  <pre><code>  constructor() {
      super()
  
      this.state = {
        value: 1,
      }
    }
  
    dropDownColorChange(event, index, value) {
      this.setState({value: value})
      //Not sure how to implement here dynamically based on array size. Would like to console.log the color string of the selected
    }
  
    render() {
      var colors = ["white", "blue", "green"] //would be able to handle any array size
  
  
      return (
               &lt;div&gt;
                 &lt;DropDownMenu
                  value={this.state.valueTwo}
                  onChange={this.dropDownColorChange}
                &gt;
                  {
                      &lt;MenuItem value={1} primaryText="Select" /&gt;
                    colors.forEach(color =&gt; {
                      &lt;MenuItem primaryText={color}/&gt;
                    })
                  }
                &lt;/DropDownMenu&gt;
               &lt;/div&gt;
      )
    }
  </code></pre>
  
  <p>Thank you</p>