React Material UI Select doesn't change value when selecting an item from the dropdown

Question

This is part of my code.

I am fetching drugs and hard-coding categories based on their class. Then I am mapping the categories, checking if a drug matches the category. If yes, then the MenuItem appears under the specific ListSubHeader.

 useEffect(() => {
    fetch('/api/drugs')
    .then(response => response.json())
    .then(json => setDrugs(json))

}, [drugs])

const [categories, setCategories] = React.useState([
  {
    id: 1,
    name: "Miscellaneous analgesics"
  },
  {
    id: 2,
    name: "Benzodiazepines"
  },
  {
    id: 3,
    name: "Aminopenicillins"
  },
  {
    id: 4,
    name: "Miscellaneous antimalarials"
  }
]);

const handleChange = (event) => {
  console.log(event.target.value);
  setPrescription({...prescription, drug: event.target.value});
}

<FormControl className={classes.formControl}>
        <InputLabel htmlFor="grouped-select">Pharmaceutical Drugs</InputLabel>
        <Select 
         id="grouped-select" 
         value={prescription.drug ? prescription.drug : ""} 
         onChange={handleChange}>
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          {categories.map(category => 
       (<span>
            <ListSubheader key={category.id}>{category.name}</ListSubheader>
            {drugs.map(drug => drug.class===category.name ? <MenuItem key={drug._id} value={drug.name}>{drug.name}</MenuItem> : null)}
       </span>)
    )}
        </Select>
        <FormHelperText>Select a Pharmaceutical Drug to prescribe.</FormHelperText>
      </FormControl>

This is the error I'm getting:

react_devtools_backend.js:2430 Material-UI: You have provided an out-of-range value undefined for the select component. Consider providing a value that matches one of the available options or ''. The available values are 1, 2, 3

None of the values I select seem to work and show what I've selected as well. What am I doing wrong here?

I've adjusted the code a bit, if I add a dummy value to

<MenuItem value="">
        <em>None</em>
      </MenuItem>

Then I seem to be receiving a value from the console.log in handleChange, however, everything here returns me an undefined value. I've looked into React Developer Tools and every rendered MenuItem in the does have a value, an id and everything.

{categories.map(category => 
       (<span>
            <ListSubheader key={category.id}>{category.name}</ListSubheader>
            {drugs.map(drug => drug.class===category.name ? <MenuItem key={drug._id} value={drug.value}>{drug.name}</MenuItem> : null)}
       </span>)
    )}

I've looked at react developer tools and it is not, the key is also being assigned properly everywhere. — Harry

Harry Harry · Accepted Answer · 2020-11-23T23:26:42

For anyone who still cares! The problem was with renderValue. I've made a renderValue function and passed it to select and return the value of the drug. Ensure to check material ui select docs if you guys get stuck. Nothing was wrong with my backend or front-end.

Solved!

React Material UI Select doesn't change value when selecting an item from the dropdown

1 Answers