Estoy codificando una tabla con ReactJS y MUI, quiero marcar la columna No. desde 1 hasta la longitud de la matriz.
Este es mi código:
<TableBody> {quizes.map((quiz) => ( <TableRow key={quiz._id}> <TableCell className={s.tablecell}>{.........}</TableCell> <TableCell className={s.tablecell}> {quiz.text} </TableCell> <TableCell className={s.tablecell}> {quiz.answer} </TableCell> <TableCell className={s.tablecell}> <Button size="small" variant="outlined" disableElevation color="info" className={s.btn} onClick={nevigateUpdateQuestion} > Edit </Button> <Button size="small" variant="outlined" disableElevation color="warning" > Delete </Button> </TableCell> </TableRow> ))} </TableBody> Uso NodeJS y MongoDB como servidor, por lo que no puedo usar quiz._id para numerar la tabla. ¿Cómo puedo hacer para marcar de 1 a la longitud de la matriz? La celda No. está en la sección {.........} .
El segundo parámetro de la función de map es el índice (basado en 0) del elemento iterativo. Puede agregar uno ( index + 1 ) para obtener el número basado en 1.
Prueba esto
<TableBody> {quizes.map((quiz, quizIndex) => ( <TableRow key={quiz._id}> <TableCell className={s.tablecell}>{quizIndex + 1}</TableCell> <TableCell className={s.tablecell}>{quiz.text}</TableCell> <TableCell className={s.tablecell}>{quiz.answer}</TableCell> <TableCell className={s.tablecell}> <Button size="small" variant="outlined" disableElevation color="info" className={s.btn} onClick={nevigateUpdateQuestion} > Edit </Button> <Button size="small" variant="outlined" disableElevation color="warning" > Delete </Button> </TableCell> </TableRow> ))} </TableBody>