display array data through map in react table - json

Question

I am trying to display array data in a table for my react app. Every time i reference the data in the table cells in returns the same element for all the columns. I would like to display each of the dates in each column.
My Table:
function SomeComponenet(props) {
return (
<React.Fragment>
{props.attendence.map.forEach((attendence, index) => {
return (
<Paper>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell align="right">
{attendence.Attendence[index].date}
</TableCell>
<TableCell align="right">
{attendence.Attendence[index].date}
</TableCell>
<TableCell align="right">
{attendence.Attendence[index].date}
</TableCell>
<TableCell align="right">
{attendence.Attendence[index].date}
</TableCell>
<TableCell align="right">
{attendence.Attendence[index].date}
</TableCell>
</TableRow>
</TableHead>
</Table>
</Paper>
);
})}
</React.Fragment>
);
}
My data:
const fakeData = [
{
Name: "A Person",
Attendence: [
{
date: "2019/12/01",
attendence: 1
},
{
date: "2019/12/02",
attendence: 1
},
{
date: "2019/12/03",
attendence: 1
}
]
}
];

Answer 1

you need another map inside the {props.attendence.map}
link to codesandbox https://codesandbox.io/s/sad-grass-sg5hr
import React, { Fragment } from "react";
import { Table } from "reactstrap";
function Test() {
const attendence = [
{
Name: "A Person",
Attendence: [
{
date: "2019/12/01",
attendence: 1
},
{
date: "2019/12/02",
attendence: 1
},
{
date: "2019/12/03",
attendence: 1
}
]
}
];
return (
<Fragment>
{attendence.map(person => {
return (
<Table>
<thead>
<tr>
<th>Name</th>
{person.Attendence.map(personAttendendance => {
return <th>{personAttendendance.date}</th>;
})}
</tr>
</thead>
<tbody>
<tr>
<td>{person.Name}</td>
{person.Attendence.map(personAttendendance => {
return <td>{personAttendendance.attendence}</td>;
})}
</tr>
</tbody>
</Table>
);
})}
</Fragment>
);
}
export default Test;

Answer 2

that's because all the indexes are the same in one iteration of the topper map. you can't use forEach on a map this way.
you can remove forEach and do another map on attendence.Attendence
something like this:
function SomeComponenet(props) {
return (
<React.Fragment>
{props.attendence.map((attendence, index) =>{
{console.log(attendence.Attendence)}
return(
<Paper >
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
{attendence.Attendence.map( newAttendence => {
return(
<TableCell align="right">
{newAttendence.date}
</TableCell>
)
})}
</TableRow>
</TableHead>
</Table>
</Paper>
);
})}
</ReactFragment>
);
}