map a multi dimensional array
//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 (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
{sheets.map((sht) => (
<div key={sht.name}>
<h1>{sht.name}</h1>
{sht.cells.map((cells) => (
<h4 key={cells.cellAddress}>
{cells.cellAddress} {cells.cellName}
</h4>
))}
</div>
))}
</div>
);
}