I am working in a task where I need to pass the data to table. The table has it's own data type and prop. I need to follow the same when I am applying the logic. Now I am trying to pass the data dynamically. But when I am trying to pass the data dynamically I am not getting the values in table body. Any one can guide me how to populate the data dynamically. I need to follow the below format when I am working with the table component
**Table Props:**
1. Table PROPS- Prop: Children Type: Node default:[] (Desc: the child
content for table consisting of eithera Table Header or Body)
2. Table Header Props- Prop: Children Type: node default:[]
3. Table Header Cell props - prop:children type:node default:[](Desc:
content to display for column header)
4. Table Row Props - Prop: Children Type: node default:[] (Desc: child
table cells to be placed within the tr)
5. Table Cell Props - Prop: Children Type: node default:[] (Desc:
content to be displayed for row cell)
My Code
<Table paddingStyle="compact">
<Header>
<HeaderCell key="Name">Name</HeaderCell>
<HeaderCell key="ID">ID</HeaderCell>
<HeaderCell key="Group">Group</HeaderCell>
</Header>
<Body>
{mockData.forEach((element) => {
element.cells.forEach(cell => {
return (
<Row key={element.key}>
<Cell>{cell.Name}</Cell> // In console I ma getting undefined
<Cell>{cell.ID}</Cell> // In console I ma getting undefined
<Cell><Batch {cell.Group}/></Cell> // In console I ma getting undefined
//Batch component will be imported
</Row>
)
})
})
}
JSON Data
[
{
"key":"k-01",
"cells":[
{ key: '0', Name: 'ABC' },
{ key: '1', ID: '123' },
{ key: '2', Group: ['1', '2'] },
]
]
Table Component Format
<Table>
<Header>
<HeaderCell key="NAME">Name</HeaderCell>
<HeaderCell key="ID">ID</HeaderCell>
<HeaderCell key="Group">Group</HeaderCell>
</Header>
<Body>
<Row key="0">
<Cell key="NAME">ABC</Cell>
<Cell key="ID">1</Cell>
<Cell key="Group">I, O</Cell> // in the form of label or React-bootstarp badge(Example)
</Row>
</Body>
</Table>
using map would be better option here ,
you are getting undefined because of the way forEach() returns the value
Like map , the forEach() method receives a function as an argument and executes it once for each array element. However, instead of returning a new array like map, it returns undefined.
as you can see in answer below
code:
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x)
//>>>>>>>>>>>>>return value: undefined