score:1

react component trees aren't html strings, they're object trees. you need to have a tr object, provide it with a bunch of td children, and then switch to a new tr object and provide its children to it.

ideally, change how you're storing grid so that it contains the rows, with child objects/arrays for the cells.

if you can't do that, you can do it on the fly:

const rows = [];
let children = [];
for (const item of grid) {
    if (grid.x === 0 && children.length) {
        rows.push(children);
        children = [];
    }
    children.push(item);
}
if (children.length) {
    rows.push(children);
}

then to render:

{rows.map((children, index) => (
    <tr key={index}>
        {children.map(item =>
            <td id={`td_${item.x}_${item.y}`}>
                {item.name}
             </td>
        )}
    </tr>
))}

you'll want to double-check that for minor typos, etc., but it's the fundamental idea: build an array of rows, with arrays of cells inside.


Related Query

More Query from same tag