Populate data in a Select component from Material UI v1 beta

Question

I'm trying to populate data from a < Select > component from Material UI v 1.0.0.0 beta but it's not working.

This is part of my code:

This is inside the render() method.

        <Select
          value={this.state.DivisionState}
          onChange={this.handleChangeDivision}
        >
          {this.renderDivisionOptions()}
        </Select>

And here I use the MenuItem tag to populate de value coming from a WS

  renderDivisionOptions() {
    return this.state.DivisionData.map((dt, i) => {
      return (
        <MenuItem
          key={i}
          value={dt.divDeptShrtDesc}>
        </MenuItem>
      );
    });
  }

This was working in the latest version of Material UI using the DropDown tag and MenuItem ej. "< DropDown > < MenuItem >....."

Some help will be nice.

Regards

I'm getting and error when I try to interact with the Select component..

hien hien · Accepted Answer · 2017-11-30T08:51:50

I think you need to add display value dt.divDeptShrtDesc for Items:

renderDivisionOptions() {
        return this.state.DivisionData.map((dt, i) => {
          return (
            <MenuItem
              key={i}
              value={dt.divDeptShrtDesc}>
                {dt.divDeptShrtDesc}
            </MenuItem>
          );
        });
      }

Small demo for using Seclect of material-ui (v1.0.0): https://codesandbox.io/s/5voz6y7kwl Hope it's useful for you

Populate data in a Select component from Material UI v1 beta

1 Answers