EN
React - How can I change the state of my data with Material UI menu item when the user select one option
1 answers
3 points
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:
xxxxxxxxxx1
function Row({game}) {2
const [mint, setMint] = React.useState(()=> game.gameCondition);3
const [mediocre, setMediocre] = React.useState(()=> game.gameCondition);4
const [medium, setMedium] = React.useState(()=> game.gameCondition);5
//...6
////////// I also declare a function handleClick to use it inside the select:7
8
const [option, setOption] = React.useState('');9
const handleChange = (event,option) => {10
setOption(event.target.value);11
};12
13
//...14
<FormControl fullWidth>15
<InputLabel id="select-label">Condition</InputLabel>16
<Select labelId="select-label" value={option} label="Conditon" onChange={handleChange}>17
<MenuItem value={(setMint)=> game.gameCondition}>Mint</MenuItem>18
<MenuItem value={(setMedium)=> game.gameCondition}>Medium</MenuItem>19
<MenuItem value={(setMediocre)=> game.gameCondition}>Mediocre</MenuItem>20
</Select>21
</FormControl>22
//...23
};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
Is it right way you use value prop?
Use this way:
xxxxxxxxxx1
<Select labelId="select-label" value={option} label="Conditon" onChange={handleChange}>2
<MenuItem value="value-1">Mint</MenuItem>3
<MenuItem value="value-2">Medium</MenuItem>4
<MenuItem value="value-3">Mediocre</MenuItem>5
</Select>or:
xxxxxxxxxx1
const aValue = 'value-1';2
const bValue = 'value-2';3
const cValue = 'value-3';4
5
// ...6
7
<Select labelId="select-label" value={option} label="Conditon" onChange={handleChange}>8
<MenuItem value={aValue}>Mint</MenuItem>9
<MenuItem value={bValue}>Medium</MenuItem>10
<MenuItem value={cValue}>Mediocre</MenuItem>11
</Select>Result:
See also
0 commentsShow commentsAdd comment
