I've been researching with no success. The answers I'm finding resolve 2 nested loops on react (with map) and I have 2 loops working already. My problem is that I need 3 of them, and I am getting errors on the third even if I have been using the same structure.
Json looks something like this:
{
"Table": [
{
"Power": "20HP",
"Count": "5",
"Vehicles": [
{
"Code": "T01-01",
"Hours": [
{
"Hour": "5:00",
"Status": "1"
},
{
"Hour": "6:00",
"Status": "2"
}
]
},
{
"Code": "T01-01",
"Hours": [
{
"Hour": "5:00",
"Status": "1"
},
{
"Hour": "6:00",
"Status": "2"
}
]
}
]
}
]
}
I have an object called table, which has an array of elements (different vehicle power types like 10 hp, 20 hp...), and each power has a set of vehicles. Finally, each vehicle has an array of hours with a status. I want an HTML table with the power on de first column, Vehicle code on the second column and the hours on the next X columns (24).
My current code works only until second loop. On the third, I get something about "Parsing error: Unexpected token, expected ","" on VS Code.
My react code within the render is the following:
{this.state.report.Table.map((d, idx) => (
<tr>
<td style={{border:"1px solid"}} >{d.Power}</td>
{d.Vehicles.map((n, idy) => (
<td style={{border:"1px solid"}}>{n.Code}</td>
***************
{n.Hours.map((h, idz) => (
<td className={classes.available}></td>
))}
****************
))}
</tr>
))}
If I remove the code within the ***, it works, but with the third loop It does not. The error on VS Code prompts on the beginning of the third loop, in "{n."
Thanks in advance for your help, let me know if I missed something or if you need more details. Im sure I am missing a code rule, as you can imagine from my question, I'm not fluent with React.