CODEWITHSUNDEEP
reactjsreact-hooksmaterial-ui
Harry
Harry

Reputation: 93

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

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>)
    )}

Upvotes: 0

Views: 2677

Answers (2)

Jay
Jay

Reputation: 349

Here is the working solution for it.

<Select
  value={plant}
  onChange={handleSelectChange}
  renderValue={(selected) => {
    if(selected)
      return plant.modelName
  }}
  >
  {plants.map((value) => (
    <MenuItem value={value}>{value.modelName}</MenuItem>
  ))}
</Select>

You have to add 'renderValue' props to render the selected value.

Upvotes: 0

Harry
Harry

Reputation: 93

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!

Upvotes: 1

Related Questions