Intentando actualizar los valores desplegables usando el componente Select de MUI pero no puedo actualizar usando el controlador onChange , el value sigue siendo el mismo aunque selecciono un nuevo elemento en el menú desplegable.
Creé un ejemplo de trabajo usando CodeSanbox . ¿Alguien podría ayudar?
Extracto de mi código
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> ); }Debe usar useState para mantener el estado actual de los datos de sus rows y actualizar la matriz en su función handleChange de esta manera:
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); };Puede echar un vistazo a este sandbox bifurcado para ver un ejemplo de trabajo en vivo.