//This is in React framework!

import "./styles.css";

let sheets = [];

const sheet1 = {
  name: "sheet 1",
  cells: [{ cellAddress: "A1", cellName: "customers" }]
};
const sheet2 = {
  name: "sheet 2",
  cells: [{ cellAddress: "A1", cellName: "cars" }]
};
const sheet3 = {
  name: "sheet 3",
  cells: [{ cellAddress: "A1", cellName: "bikes" }]
};

const cell1 = { cellAddress: "B1", cellName: "Customer Name" };
const cell2 = { cellAddress: "B1", cellName: "Car Name" };
const cell3 = { cellAddress: "B1", cellName: "Bike name" };
const cell4 = { cellAddress: "C1", cellName: "Customer Surname" };
const cell5 = { cellAddress: "C1", cellName: "Car Model" };
const cell6 = { cellAddress: "C1", cellName: "Bike Model" };

sheets.push(sheet1, sheet2, sheet3);

//how to push the cells to the sheets?
sheets[0].cells.push(cell1);
sheets[1].cells.push(cell2);
sheets[2].cells.push(cell3);
sheets[0].cells.push(cell4);
sheets[1].cells.push(cell5);
sheets[2].cells.push(cell6);

console.table(sheets);
console.log(sheets[0].cells);

//what i want to achieve, is first map a div for each sheet,
//Then Map its children for each subsequent cell for that sheet.

export default function App() {
  return (
    

      
Hello CodeSandbox
      
Start editing to see some magic happen!
      {sheets.map((sht) => (
        

          
{sht.name}
          {sht.cells.map((cells) => (
            

              {cells.cellAddress} {cells.cellName}
            
          ))}
        
      ))}
    
  );
}