Languages

React - How can I change the state of my data with Material UI menu item when the user select one option

3 points
Asked by:
sarah kacem
1030

I'm using Material UI to create table and allow the user to change the actual information that he saved in the database, so I'm using React and here is my actual code:

function Row({game}) {
    const [mint, setMint] = React.useState(()=> game.gameCondition);
    const [mediocre, setMediocre] = React.useState(()=> game.gameCondition);
    const [medium, setMedium] = React.useState(()=> game.gameCondition);
//...
////////// I also declare a function handleClick to use it inside the select:

    const [option, setOption] = React.useState('');
    const handleChange = (event,option) => {
        setOption(event.target.value);
    };

//...
        <FormControl fullWidth>
          <InputLabel id="select-label">Condition</InputLabel>
          <Select labelId="select-label" value={option} label="Conditon" onChange={handleChange}>
            <MenuItem value={(setMint)=> game.gameCondition}>Mint</MenuItem>
            <MenuItem value={(setMedium)=> game.gameCondition}>Medium</MenuItem>
            <MenuItem value={(setMediocre)=> game.gameCondition}>Mediocre</MenuItem>
          </Select>
        </FormControl>
//...
};

How I can add the value selected to my state ? (I also need to say that I already map my data, so I can directly access to them using "game.")

1 answer
8 points
Answered by:
sarah kacem
1030

Is it right way you use value prop?

Use this way:

<Select labelId="select-label" value={option} label="Conditon" onChange={handleChange}>
  <MenuItem value="value-1">Mint</MenuItem>
  <MenuItem value="value-2">Medium</MenuItem>
  <MenuItem value="value-3">Mediocre</MenuItem>
</Select>

or: 

const aValue = 'value-1';
const bValue = 'value-2';
const cValue = 'value-3';

// ...

<Select labelId="select-label" value={option} label="Conditon" onChange={handleChange}>
  <MenuItem value={aValue}>Mint</MenuItem>
  <MenuItem value={bValue}>Medium</MenuItem>
  <MenuItem value={cValue}>Mediocre</MenuItem>
</Select>

Result:

See also

  1. React - Material-UI Select component with array of objects 
0 comments Add comment
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join