React adding array elements to dropdown?

Question

Given an array const places = [" a1", "a2", "a3"]; and

  <FormControl variant="outlined" className={classes.formControl}>
    <InputLabel id="dropdown_label">Testing</InputLabel>
    <Select
      value={5}
      onChange={handleChange}
      label="Testing"
    >
      <MenuItem value={10}> {places[0]} </MenuItem>
      <MenuItem value={20}>{places[1]}</MenuItem>
      <MenuItem value={30}>{places[2]}</MenuItem>
    </Select>
  </FormControl>

How can I make it so menuItem is created for each value in places when places is of varied size?

You can use `Array.map` to render all the list items. Check [Lists and keys](https://reactjs.org/docs/lists-and-keys.html) — Akhil, May 27 '21 at 15:08

score 1 · Accepted Answer · answered May 27 '21 at 15:10

You'll have to map over the places array and return the MenuItem component. See the example below. I've modified your code to make it work. Don't forget to add the key property to the component returned from map.

<FormControl variant="outlined" className={classes.formControl}>
  <InputLabel id="dropdown_label">Testing</InputLabel>
  <Select
    value={5}
    onChange={handleChange}
    label="Testing"
  >
  {places.map((place, i) => (
    <MenuItem key={i} value={(i + 1) * 10}>{place}</MenuItem>
  )}
  </Select>
</FormControl>

React adding array elements to dropdown?

1 Answers1