How to use Select in ReactJS, and creating its options with an Array

Question

I'm new to ReactJS. Well I only want to solve this problem, nothing else I want from React. In my already build app, SelectField (of Material-UI) is used, which do not show the selected value. Other than this everything works fine. Here is the Markup:

<SelectField ref="device" selectedIndex={this.state.deviceIndex} displayMember="device_model" valueMember="device_id" menuItems={this.state.devices} onChange={this.onSelectDevice} style={{float:"left", marginTop:"5px", width:"300px"}} />

I want one of the two things: 1. Either solve my problem with the existing SelectField component, after which I will be able to get the selected item. OR 2. Share the method of working with simple HTML Select...

Answer 1

You must pass the menu items to display as children to the SelectField component. This is easy with an inline mapping expression.

Example:

  <SelectField selectedIndex={this.state.deviceIndex}>
    {this.state.devices.map(device =>
      <MenuItem value={device.id} primaryText={device.name}/>
    )}
  </SelectField>