Populate data into material-ui dropdown React JS

Question

I need some help, I want to populate data into a Dropdown, I'm using material-ui but I don't know how to do it, I really new to react, I know that I can use props and then pass those to the dropdown but It's not that clear for me.

This is my code:

import React from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';



export default class CreateLinksave extends React.Component {

 constructor(props) {
   super(props);
   this.state = {value: 1
   };
   this.handleChange=this.handleChange.bind(this);
 }
 handleChange(event, index, value) {this.setState({value});}

render() {
 return (
    <div className="container">
     <div>
       <RaisedButton label="Copy an existing Global Multisave"/>
     </div>
      <div>
      <DropDownMenu value={this.state.value} onChange={this.handleChange}>
        <MenuItem value={1} primaryText="Never" />
        <MenuItem value={2} primaryText="Every Night" />
        <MenuItem value={3} primaryText="Weeknights" />
      </DropDownMenu>
      </div>
     </div>
  );
 }
}

as you can see, I have some options in my dropdown "hardcoded" but I want to make it dynamic, so if more options are added to props then this populate them automatically.

Can someone please help me with this.

Regards.

schmoopy · Accepted Answer · 2017-11-24 00:49:33Z

1

Assuming you can send those props as an array:

items = [
  { value: 1, primaryText: 'Never' },
  { value: 2, primaryText: 'Every Night' },
  { value: 3, primaryText: 'Weeknights' },
]

Simply map through them and you'll get the same result:

render() {
  return (
    <div>
      <DropDownMenu value={this.state.value} onChange={this.handleChange}>
        {this.props.items.map(item =>
          <MenuItem key={item.value} {...item} />
        )}
      </DropDownMenu>
    </div>
  )
}

edited Nov 24, 2017 at 0:49

schmoopy

6,69911 gold badges57 silver badges91 bronze badges

answered Nov 7, 2017 at 15:22

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

3 Comments

kennechu Over a year ago

Thanks for your time, just one more question, and don't know if its related to ES6 or something but Im getting an "SyntaxError: Unexpected token" on the array, the issue is on the "=" sign of the Items array.

Hemerson Carlin Over a year ago

Check whether you es6 configuration (mainly babel) supports arrow functions. If not, you can replace => to function(item) { return <MenuItem ... /> } and that also works.

schmoopy Over a year ago

Looks like the syntax is a bit off, the start should be curly: { this.props.item... NEVER MIND, i was able to edit post

Collectives™ on Stack Overflow

Populate data into material-ui dropdown React JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related