React: table td is populating horizontally-CodePudding

I was working on this json data with react-table, it displays yet horizontally in a single <td></td>, your inputs are highly appreciated.

export const COLUMNS = [

    {
        Header: 'mId',
        accessor: (row) => {return row.skus.map(sku => sku.mId); }
    }]

Please note that I can access the data and print but it looks weird.

Expected Output:

<td>sku2620222 </td>

<td>sku2620220</td>

<td>sku2680407 </td>

<td>sku2680408 </td>

<td>sku10980349 </td>

<td>sku2680406</td>

Real output: <td> sku2620222sku2620220sku2680407sku2680408sku2680405sku10980349sku2680406</td>

Basically I want it to display in every row. Thanks a lot

CodePudding user response：

Each item you map through needs to be in its own row. Then you can add as many table downs as you need. That way each time you map through it, it will render a new table row. Here is an extremely simple table you can follow.

export default function App() {

  let data = [
    {sku: "sku2620222"},
    {sku: "sku2620220"},
    {sku: "sku2680407"},
    {sku: "sku2620222"},
    {sku: "sku2680408"},
  ]

  let tabledata = data.map(i => {
    return (
      <tr>
        <td>
          {i.sku}
        </td>
      </tr>
    )
  })

  return (
    <>
      <table>
        <thead>
          <tr>
            <th>
              SKU
            </th>
          </tr>
        </thead>
        <tbody>
          {tabledata}
        </tbody>
      </table>
    </>
  )
}