Table Numbering in ReactJS

December 13, 2021

I am coding a table with ReactJS and MUI, I want to mark the No. column from 1 to length of array. This is my code:

          <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>

I use NodeJS and Mongodb as server so I cannot use quiz._id to number the table. How can I do to mark from 1 to length of array? The No. cell is in {………} section.

>Solution :

The second parameter of the map function is the index (0-based) of the iterating item. You can add one (index + 1) to get the 1-based number.

Try this

<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>