Lambert Lambert - 1 year ago 110
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.


{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}


Answer Source

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>);