How to create selects and states dynamically on react using Material UI?

Question

I need to create Select components based on a list of selects that i have, for example:

List -> item1, item2

The component :

<Select 
  value={this.state."NAME OF THE ITEM ON THE LIST"}
  onChange={this.handleChange}
 <MenuItem value={X} key={X} > Something </MenuItem> (the MenuItem part is working)
</Select>

Since the select component needs a value and i need that value to be a state, so when it gets clicked it will call the method handleChange and will update the state like this:

handleChange = (event) => {
    this.setState({
        "THE NAME OF THE ITEM ": event.target.value(this comes from the MenuItem)
    });
};

How can i create the state dynamically so if i have a list with X itens it will create X selects and X states to be updated?

Arnaud Christ · Accepted Answer · 2018-05-15 14:03:50Z

1

You can use an array property in your state to manage these items

state = {
    items: []
}

Then, when you are dynamically adding a select, you have to add a new value in this array

addItem = () => {
    this.setState({
        items: [
            ...this.state.items, // previous items
            { value: ""} // plus the new one
        ]
    });
};

And finally, when you render a Select

<Select
  value={this.state.items[index].value
  onChange={event => {
    this.setState({ // map over the array to modify the matching item
      items: this.state.items.map(
        (item, idx) =>
          idx === index ? {...item, value: event.target.value} : item
      )
    });
  }}>

answered May 15, 2018 at 14:03

Arnaud Christ

3,5713 gold badges27 silver badges34 bronze badges

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

4 Comments

Lucio Zenir Over a year ago

in this part : value={this.state.items[index].value}

Lucio Zenir Over a year ago

Can u make a working example so i can compare with what i did?

Lucio Zenir Over a year ago

Nevermind, just figure it out, but your answer give me the right path to follow, thanks

akshaypjoshi Over a year ago

@LucioZenir What is [index]?

Venkat Ch · Accepted Answer · 2019-03-12 11:03:08Z

0

hopefully below snippet will help you,

{this.props.data.map((e, keyIndex) => {
    return (<MenuItem key={keyIndex} value={e.warehouseId}>{e.name}</MenuItem>);
 })
}

answered Mar 12, 2019 at 11:03

Venkat Ch

7361 gold badge5 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to create selects and states dynamically on react using Material UI?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related