Render Table <tr> tag based on condition in ReactJs within map loop

Question

I need to render <tr> start and close it, based on a condition:

{grid.map((item, index) => {
    return <React.Fragment key={index}>
        {item.x === 0 ? <tr/> : ""}
        <td id={`td_${item.x}_${item.y}`}>
            {item.name}
        </td>
    </React.Fragment>
})}

Above code rendering all <td> tag outside of <tr> tag, but I want all <td> in <tr> tag. In this code, I want <tr> start when item.x === 0 and need to render </tr> end in bottom this loop.

{grid.map((item, index) => {
    return <React.Fragment key={index}>
        {item.x === 0 ? <tr> : ""}
        <td id={`td_${item.x}_${item.y}`}>
            {item.name}
        </td>
        {item.x === 0 ? </tr> : ""}
    </React.Fragment>
})}

This code showing error in jsx syntax error.

Could you show us data you keep in grid array?

macborowy
– macborowy

2020-07-28 13:14:24 +00:00
Commented Jul 28, 2020 at 13:14 — macborowy
– macborowy, Commented Jul 28, 2020 at 13:14

T.J. Crowder · Accepted Answer · 2020-07-28 13:14:22Z

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.

Collectives™ on Stack Overflow

Render Table <tr> tag based on condition in ReactJs within map loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related