How to nest 3 map loop functions in ReactJS

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.

Answer

The only overt thing I see missing is the middle mapping needs to return a single node.

 {this.state.report.Table.map((d, idx) => (
   <tr key={idx}>                          
     <td style={{border:"1px solid"}} >{d.Power}</td>

     {d.Vehicles.map((n, idy) => (
       <React.Fragment key={indy}> //<-- return single node from map here

         <td style={{border:"1px solid"}}>{n.Code}</td>
         {n.Hours.map((h, idz) => (
           <td key={idz} className={classes.available}></td>
         ))}

       </React.Fragment>
     ))}

   </tr>
 ))}