Creating dynamic table - reactjs

Question

I'm trying to create a table with dynamic data so that I can reuse the table. The headers are displaying as intended but the rows are not displaying at all.
Data:
[
{
"id": "1231",
"name": "Michael",
"phone": "11223311",
"medical": "YES"
},
{
"id": "32123",
"name": "Johnson",
"phone": "3311323",
"medical": "NO"
}
]
Headers:
const headCells = [
{id: 'id'},
{id: 'name'},
{id: 'phone'},
{id: 'medical'}
What I've done:
const rows = () => {
if (data) {
data.map((row) =>
<TableRow key={row.uuid}>
<TableCell>{row}</TableCell>
</TableRow>)
}
};
return(
<TableContainer component={Paper}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{headers.map((headCell) => (
<TableCell>{headCell.id}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows}
</TableBody>
</Table>
</TableContainer>
)
With this the headers are displaying but the rows are not. Can anybody see why?

Answer 1

I think you are trying to render objects.
try this:
const rows = () => {
if (data) {
data.map((row) =>
<TableRow key={row.uuid}>
<TableCell>{row.name}</TableCell>
<TableCell>{row.phone}</TableCell>
<TableCell>{row.meducal}</TableCell>
</TableRow>)
}
};
or this if you dont want to hard code it:
const rows = () => {
if (data) {
data.map((row) =>
<TableRow key={row.uuid}>
{Object.keys(row).map((item, index)=>{
return <TableCell key={index}>{row[item]}</TableCell>
})
</TableRow>)
}
};

Answer 2

You are now calling rows(data) with table data. Also you are not creating cells with data
Here is how you can do it
const headCells = [
{dataIndex: 'id', name: 'ID' },
{dataIndex: 'name', name: 'Name' },
{dataIndex: 'phone', name: 'Phone' },
{dataIndex: 'medical', name: 'Medical' }
];
const Header = ({ cols }) => {
return cols.map((col) => (
<TableCell>{col.name}</TableCell>
));
}
const Rows = ({ data, cols }) => {
if (data) {
return data.map((row) =>
<TableRow key={row.uuid}>
{cols.map(col => <TableCell>{row[col.dataIndex]}</TableCell>)}
</TableRow>
);
}
else return [];
};
return(
<TableContainer component={Paper}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
<Header cols={headCells} />
</TableRow>
</TableHead>
<TableBody>
<Rows data={data} cols={headCells} />
</TableBody>
</Table>
</TableContainer>
)