Unable to map array of array data in React

0
votes

In a list of array of array data coming from JSON API is to be integrated in Grid component, but, unable to map based on header fields. Please refer to the code below

const newCompData = [
    {
      id: 1,
      comp: "McDonalds",
      feedback: "Best Food Chain",
      name: "Mike John",
      store: "Burger Store"
    },
    {
      id: 2,
      comp: "KFC",
      feedback: "Best Chicken Products",
      store: "Chicken Food",
      name: "Steve Williams"
    },
    {
      id: 3,
      comp: "Dominos",
      feedback: "Best Pizza Store",
      store: "Pizza Store",
      name: "Mark Rays",
    },
    {
      id: 4,
      comp: "Star Bucks",
      feedback: "Best Coffee Store",
      store: "Coffee Store",
      name: "Patrick Right",
    },
    {
      id: 5,
      comp: "Burger King",
      feedback: "Best Burgers",
      store: "Burger Store",
      name: "Williams Wills"
    },
    {
      id: 6,
      comp: "Lays",
      feedback: "Best Chips Factory",
      store: "Chips Store",
      name: "Sam Andrews",
    }
  ];

The above is then mapped accordingly

const [dataAll, setDataAll] = useState([]);

  useEffect(() => {
    const newData = newCompData?.map((data) => {
      return [{ id: data.id }, data.comp, data.store, data.name, data.feedback];
    });

    setDataAll(newData);
  }, []);

  return (
    <div className="App">
      <Table newData={dataAll} />
    </div>
  );

Passing the array of array data to the Table component

const Table = ({ newData }) => {

// Checking for newData value and is getting in console  
console.log("PROPS", newData);
  const store_grid_data = {
    data: newData,
    page_info: {
      total_pages: 5,
      current_page: 1
    }
  };

  let GridConfig = {};
  let grid_data = {};

  GridConfig = TableConfig;
  grid_data = store_grid_data;

  const [gridConfigData, setGridConfigData] = useState(GridConfig);

  return (
    <>
      <Grid GridConfig={gridConfigData} GridData={gridData} />
    </>
  );
};

enter image description here

As you can see from image attached, the relevant data doesn't match with the header field as expected. The 'company' data has disappeared, whereas 'store' and 'name' data is shifted, also for 'established date' isn't available so keeping it empty. It doesn't map properly. What could be the best optimal solution to tackle this issue?

Please refer also codesandbox: https://codesandbox.io/s/bold-boyd-2e16j6

javascriptreactjsarrays