Estoy tratando de iterar el elemento MenuItem del componente Mui usando el ciclo forEach , pero obtengo el tipo 'void' no es asignable para escribir el error 'ReactNode' . Aquí está mi fragmento de código-
<TableCell> <Typography>expiry</Typography> <Select variant="outlined" sx={{ width: '100%', height: 35, borderRadius: 2 }}> { groupData.forEach((option) => ( <MenuItem key={option.expiry} value={option.expiry}> {option.expiry} </MenuItem> ))} </Select> </TableCell>Gracias de antemano
forEach devuelve vacío. Para mostrar una lista de elementos en JSX, utiliza el método de map de la matriz, que convertirá los elementos de la matriz en alguna otra forma. Por ejemplo:
const squares = ( <ul> {[1, 2, 3, 4].map((value) => ( <li key={value}>{value}</li> ))} </ul> );Obtenga más información sobre las listas en reaccionar aquí
Para tu caso, puedes hacer lo siguiente:
<TableCell> <Typography>expiry</Typography> <Select variant="outlined" sx={{ width: '100%', height: 35, borderRadius: 2 }}> {groupData.map((option) => ( <MenuItem key={option.expiry} value={option.expiry}> {option.expiry} </MenuItem> ))} </Select> </TableCell>