ReactJS：<DropDownMenu />の中にMaterial-UIの<MenuItem/>を動的にレンダリングする方法はありますか？

Question

ReactJS + Material-UIを使用して、colorsという配列があり、さまざまな色の文字列が含まれています。例えば、配列colorsには、 "white"、 "blue"、 "green"の3色の文字列があります。次に、（http://www.material-ui.com/#/components/dropdown-menu）内の各色文字列を<MenuItem/>にレンダリングしたいと思います。 console.log（ "white"）。

だから私は.forEachを使用しましたが、文字列は表示されず、空です。 ？間違ってここ

はコードです：

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 (
      <div> 
       <DropDownMenu 
       value={this.state.valueTwo} 
       onChange={this.dropDownColorChange} 
       > 
       { 
        <MenuItem value={1} primaryText="Select" /> 
        colors.forEach(color => { 
        <MenuItem primaryText={color}/> 
        }) 
       } 
       </DropDownMenu> 
      </div> 
    ) 
    } 

ありがとうございました

Answer 1

あなたはほぼ正しいと思っています。使用可能な色の上mapを有し、各色毎MenuItemを返す：

const colors = ['white', 'blue', 'green']; 

class ColorChanger extends Component { 
    constructor() { 
    super(); 

    this.state = { 
     selectedColorValue: 1, 
    }; 
    } 

    handleColorChange(event, index, value) { 
    console.log(`You have selected ${colors[value]} color`); 

    this.setState({ 
     selectedColorValue: value 
    }); 
    } 

    render() { 
    return (
     <div> 
     <DropDownMenu value={this.state.selectedColorValue} onChange={this.handleColorChange}> 
      {colors.map((color, index) => 
      <MenuItem key={index} value={index} primaryText={color} /> 
     )} 
     </DropDownMenu> 
     </div> 
    ); 
    } 
} 

map（forEachとは逆）は、各要素は、述語関数の戻り値である配列を返します。あなたの場合は<MenuItem />を返します。