Lambert Lambert - 2 months ago 10
React JSX Question

How to conditionally add closing and starting JSX tags

I have never been able to figure out how to conditionally close off an existing JSX tag and start a new one without getting syntax errors in Visual Studio. How is this done? In the example below, I want to split an existing table into two tables. I don't get any syntax errors if I remove the conditional code.

<table>
<thead>
...
</thead>

{true ?
</table> /* Close first table (Syntax error on this line because of no starting tag) */
<table> /* Create a new table by splitting the existing table */
: null}

<tbody>
...
</tbody>
</table>

Answer

I could not find a workaround for this problem, so I just manually solved the problem with an if statement.

if (condition === true) {
    return (<table>...</table> <table>...</table>);
} else {
    return (<table>...</table>);
}
Comments