How to render an array of objects inside a table body using .map() in React

Question

I have an array of data, theData, that looks like this:

const theData = [
    {
        student_id: 2,
        firstName: 'John',
        subject: 'Physics',
        grade:  90
    },
    {
        student_id: 14,
        firstName: 'Sally',
        subject: 'Biology',
        grade: 95
    },
    {
        student_id: 17,
        firstName: 'Roger',
        subject: 'Calculus',
        grade: 87
    },
    {
        student_id: 83,
        firstName: 'Mary',
        subject: 'Computer Science',
        grade: 99
    }]

I'd like to render this data in tabular form using React.

I can render the first row of the table using the following:

import {TableContainer, Table, TableHead, TableRow, TableCell, TableBody} from '@mui/material';

  <TableContainer>
    <Table>
      <TableHead>
        <TableRow>
          <TableCell key='FirstName'>FirstName</TableCell>
          <TableCell key='Subject'>Subject</TableCell>
          <TableCell key='Grade'>Grade</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {
          <TableRow key={theData[0].student_id}>
            <TableCell key='firstName'>{theData[0].firstName}</TableCell>
            <TableCell key='Subject'>{theData[0].subject}</TableCell>
            <TableCell key='Grade'>{theData[0].grade}</TableCell>
          </TableRow>
        }
      </TableBody>
    </Table>
  </TableContainer>

Which results in this table:

firstName       subject        grade
John            Physics        90

How would I render the entire table using the .map() function inside the TableBody element?

I tried to render the table procedurally using the indices. My goal is to render it in a more elegant way using .map() (which I do not know how to apply to this data). — equanimity
– equanimity, Commented Feb 3, 2023 at 17:51

Treycos · Accepted Answer · 2023-02-03 17:51:42Z

With something like this

import {TableContainer, Table, TableHead, TableRow, TableCell, TableBody} from '@mui/material';

  <TableContainer>
    <Table>
      <TableHead>
        <TableRow>
          <TableCell key='FirstName'>FirstName</TableCell>
          <TableCell key='Subject'>Subject</TableCell>
          <TableCell key='Grade'>Grade</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {theData.map(row =>
          <TableRow key={row.student_id}>
            <TableCell key='firstName'>{row.firstName}</TableCell>
            <TableCell key='Subject'>{row.subject}</TableCell>
            <TableCell key='Grade'>{row.grade}</TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  </TableContainer>

Elvin · Accepted Answer · 2023-02-03 17:53:16Z

1

Map directly in TableBody

<TableBody>
  {theData.map((item) => {
    return (
      <TableRow key={item.student_id}>
        <TableCell key="firstName">{item.firstName}</TableCell>
        <TableCell key="Subject">{item.subject}</TableCell>
        <TableCell key="Grade">{item.grade}</TableCell>
      </TableRow>
    );
  })}
</TableBody>;

answered Feb 3, 2023 at 17:53

Elvin

5841 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to render an array of objects inside a table body using .map() in React

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related