I am creating a table in React from a JSON like this:

[
    {
        "Id_side": 123,
        "Name_side": "R4",
        "Name_cycle": "C1"
    },
    {
        "Id_side": 345,
        "Name_side": "M1",
        "Name_cycle": "C2"
    },
    {
        "Id_side": 567,
        "Name_side": "V5",
        "Name_cycle": "C3"
    },
    {
        "Id_side": 45,
        "Name_side": "U4",
        "Name_cycle": "C4"
    }
]

The table, I am rendering it like this:

import tableData from "./actions/tableData.json"

const BrandTable = () => {
  
  let tb_headers = tableData.map((item)=>{
    return(
      <td key={item.Id_side}>{item.Name_cycle}</td>
    )
  })
  //  this function is only for testing, I know it does not achieve anything. 
  function renderChecks() {
    console.log("checkbox")
    for (var i = 0; i < tableData.length; i  ){
      return <td><input type="checkbox" value="Test" /></td>
  } }

  let tb_data = tableData.map((item)=>{
    return(
      <tr key={item.Id_side}>
        <td>{item.Name_side}</td>
        {renderChecks()}
      </tr>
    )
  })

  return(
    <table id="table">
      <thead>
      <tr>
        <td></td>
        {tb_headers}
        </tr>
      </thead>
      <tbody>
        {tb_data}
      </tbody>
    </table>
    
  )
 
};

export default BrandTable; 

For now I am only able to get a table like this: