Trying to update dropdown values using MUI's Select component but I can't get to update using onChange handler, the value remains same always even though I select a new item in the dropdown.
I created a working example using CodeSanbox. Could anyone please help?
Excerpt from my code
export default function Cars() {
const rows = [
{
make: "BMW",
model: "X3",
type: "Suv"
},
{
make: "VW",
model: "Jetta",
type: "Sedan"
}
];
const handleChange = (e, row, index) => {
console.log("dropdown value -> ", e.target.value);
console.log("row -> ", row);
row.type = e.target.value;
};
return (
<div>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Make</TableCell>
<TableCell>Model</TableCell>
<TableCell>Type</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row, index) => (
<TableRow key={row.make}>
<TableCell component="th" scope="row">
{row.make}
</TableCell>
<TableCell component="th" scope="row">
{row.model}
</TableCell>
<TableCell component="th" scope="row">
<FormControl>
<InputLabel>Type</InputLabel>
<Select
value={row.type}
label="Type"
onChange={(e) => handleChange(e, row, index)}
>
<MenuItem value="Sedan">Sedan</MenuItem>
<MenuItem value="Suv">Suv</MenuItem>
</Select>
</FormControl>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
}
You should use useState to keep the current state of your rows data and update the array in your handleChange function like this:
const [rows, setRows] = useState([
{
make: "BMW",
model: "X3",
type: "Suv"
},
{
make: "VW",
model: "Jetta",
type: "Sedan"
}
]);
const handleChange = (e, row, index) => {
console.log("dropdown value -> ", e.target.value);
console.log("row -> ", row);
const copyRows = [...rows];
copyRows[index].type = e.target.value;
setRows(copyRows);
};
You can take a look at this forked sandbox for a live working example.