Why do we need parentheses around multi-line JSX expressions?

Question

Why do we need parentheses around multi-line JSX expressions?

Answer

We want to use parentheses around multi-line JSX expressions to make sure we are avoiding JavaScript’s automatic semicolon insertion which will add semicolons (based on rules given by the JavaScript specifications) to terminate statements when we don’t necessarily want/expect that behavior in a JSX expression.

19 Likes

Hi,
Please can you post an example for above explanation.

Hello!

I believe aubsrey is talking about something like this:

Wrong usage

let myVariable = <div><h1>&nbsp; Hello world!</h1></div>;

Semicolon “;” inside “&nbsp;” breaks nesting, as it is not treated as part of JSX expression, but it is treated as basic js syntax.


Correct usage

let myVariable = ( <div><h1>&nbsp; Hello world!</h1></div> );

this way any semicolon between “(” and “)” is ignored by js interpreter.


3 Likes