Textfield with dropdown material ui items won't show ReactJS

user_10722456 0
Viewed 2459

why does the items not appear in dropdown? I have an array which items I want to be on the dropdown:

const categoryDB = [
  "Notebook",
  "Desktop PC",
  "Monitor"
]

My React/materialui element looks like the following:

    <TextField style={tfBigStyling} select required="true" margin="normal" label="Category" size="medium">
      {categoryDB.map((option) => (
        <MenuItem key={option.value} value={option.value}>
        {option.label}
      </MenuItem>
    ))}</TextField>

But if I look at the website there's only the textfield with a empty dropdown list. What did I do wrong? How can I set those items of categoryDB as dropdown? Thanks in advance

material-ui reactjs drop-down-menu javascript
1 Answers

Your array only contains strings, not objects, so in your map function shouldn't reference .value or .label, just option. Alternatively you could modify your original array to something like:

const categoryDB = [
  {
    label: "Desktop PC",
    value: 1
  },
  {
    label: "Notebook",
    value: 2
  },
  {
    label: "Monitor",
    value: 3
  }
]
user_104724510
Related