How to populate nested array of object data in react-bootStarp card-CodePudding

I am trying to render the json data in react bootstrap card, I am having a mockdata which consists of array of object data with in it. I have rendered the data in card format but the problem is I need one cell of data in one card and another cell of data in next card. But all the data is getting rendered in individual card. Any body can assist me where I am doing mistake, I have written the mockData and code below. Thanks in adavance.

const Table = ({ mockData }) => {
  function getData(cells) {
    return cells.map((cell) => {
      const { ...rest } = cell;
      console.log({ ...rest });

      const label = Object.values(rest)[2];

      const data = Object.values(rest)[3];

      console.log(data);
      return (
        <Card>
          <Card.Body>
            <span>
              <b>{label}</b>
            </span>
            <span> {data}</span>{" "}
          </Card.Body>
        </Card>
      );
    });
  }
  function completeCardData(mockData) {
    return mockData.map((row) => {
      return (
        <Card>
          <Card.Body>{getData(row.cells)}</Card.Body>
        </Card>
      );
    });
  }

  return <div>{completeCardData(mockData)}</div>;
};

//Mock Data

[
  {
    "key": "row-0",

    "cells": [
      {
        "key": "cell-0",
        "id": "ID-0",
        "headerName": "Name",
        "CustomerName": "ABC"
      },

      {
        "key": "cell-1",
        "id": "ID-1",
        "headerName": "RegID",
        "CustomerID": "P-01"
      },

      {
        "key": "cell-2",
        "id": "ID-2",
        "headerName": "Detail",
        "Deatil": "Abc"
      }
    ]
  },

  {
    "key": "row-1",

    "cells": [
      {
        "key": "cell-1",
        "id": "ID-1",
        "headerName": "Name",
        "CustomerName": "CDE"
      },

      {
        "key": "cell-2",
        "id": "ID-2",
        "headerName": "RegID",
        "CustomerID": "P-02"
      },

      {
        "key": "cell-3",
        "id": "ID-3",
        "headerName": "Detail",
        "Deatil": "CDE"
      }
    ]
  }
]

CodePudding user response：

a codesandbox would help, but if I understood correctly, you need sth like this

  function getData(cell) {
      return (
        <Card>
          <Card.Body>
            <span>
              <b>{cell.headerName}</b>
            </span>
            <span> {cell.CustomerName}</span>{" "}
          </Card.Body>
        </Card>
      );
  }

  function completeCardData(mockData) {
    return mockData.map((row) => {
      return row.cells.map(cell => getData(cell))
    });
  }

Right now you create a Card and put everything inside there. What you need it to create for each cell a new Card with its contents.