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...

Jeff · Accepted Answer · 2016-02-01 11:52:56Z

4

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>

answered Feb 1, 2016 at 11:52

Jeff

12.2k14 gold badges85 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Muhammad Mehdi Raza Over a year ago

In the console, it gives an error: Uncaught ReferenceError: MenuItem is not defined

Jeff Over a year ago

You need to import it somehow, I don't know what module system you are using. The documentation is a great resource: material-ui.com/#/components/select-field

Muhammad Mehdi Raza Over a year ago

can we do this with simple HTML Select?

Jeff Over a year ago

Sure, you just replace SelectField with select, and MenuItem with option.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related