Display json data in table (react, material.ui)

Question

I want to display a table-list with the headers First Name and Email coming from a JSON with 1,000 ids. I have this code:

import PostData from '../data/posts.json'

function Postlist() {
    return (
        <div>
            {PostData.map((list, index) => {
                return <div>
                    <TableContainer>
                        <Table>
                            <TableHead>
                                <TableRow>
                                    <TableCell>First Name</TableCell>
                                    <TableCell>Email</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                <TableRow>
                                    <TableCell>{list.first_name}</TableCell>
                                    <TableCell>{list.email}</TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>
                    </TableContainer>
                </div>
            })}
        </div>
    )
}

The result is a table with one header per id. I need a list, so I just need one header for all the ids. What I am doing wrong?

Answer 1

Iterate PostData to render <TableRow>s inside <TableBody>

import PostData from '../data/posts.json'

function Postlist() {
    return (
        <div>
            <TableContainer>
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>First Name</TableCell>
                            <TableCell>Email</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                      {PostData.map((list, index) => (
                        <TableRow key={index}>
                            <TableCell>{list.first_name}</TableCell>
                            <TableCell>{list.email}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                </Table>
            </TableContainer>
        </div>
    )
}