Looping and rendering in reactjs - reactjs

Question

const user1 = [
{
id: 1,
orderDetails: [
{
id: 1,
custFN: 'Jon',
custLN: 'Smith',
serverDetails:
[{
id: 123,
sFN: 'Barack',
sLN: 'Obama',
}],
orderFinish: false,
}
],
shopF: [
{
maxPX: 10,
maxPY: 10,
}
],
furniture: [
{
id: 1,
type: 'table',
pX: 2,
pY: 0,
label: 'VIP Table',
color: 'green',
},
{
id: 2,
type: 'table',
pX: 2,
pY: 1,
label: 'VIP Table',
color: 'green',
},
{
id: 3,
type: 'chair',
pX: 1,
pY: 0,
label: 'VIP Chair',
color: 'brown',
},
{
id: 4,
type: 'chair',
pX: 1,
pY: 1,
label: 'VIP Chair',
color: 'pink',
},
],
}
];
My app is like a dining area where there are tables, chairs, plants etc. Think of it as tiles. So anyway,
Above is my sample data. shopF determines the maximum tiles that will be made(more like x and y coordinates). furniture consists of its position, type of furniture etc.
My problem is that I want to render an element that will serve as tiles and while looping it, determine if a furniture exists in x and y coordinates. I'm thinking of nested for loop.
return (
<React.Fragment>
{
// For loop y
// If furniture is equal to y then render also furniture else just render empty tiles
// For loop x
// If furniture is equal to x then render also furniture else just render empty tiles
}
</React.Fragment>
);
I've tried using map functionality but I don't know how to exactly do it.
Below image is the layout for the 'tiles' and its x and y coordinates.

Answer 1

Here's how I would do it, first create a Tilemap using this method:
const BuildTilesMap = (data, sizeX, sizeY) => {
let arr = new Array(sizeY).fill(null).map(() =>
new Array(sizeX).fill(null).map(() => ({
type: "empty" // chnage this to fit your need
}))
);
for (const item of data) {
console.log(item);
arr[item.posY][item.posX] = item;
}
return arr;
};
Then render a Row which would have a simple div which style set display: flex inside with an map of items like so:
const RenderRow = ({ data }) => {
return (
<div style={{ display: "flex" }}>
{data.map(e => (
<Tiles data={e} />
))}
</div>
);
};
const Tiles = ({ data }) => {
return (
<div style={{ height: 80, width: 80, border: "1px solid #555" }}>
{data.type}
</div>
);
};
Here's the codesandbox