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.
Perhaps, it means that JavaScript automatically inserts semicolon when we don’t insert it.
Hence, we use parenthesis in multiline JSX, so that JavaScript doesn’t insert it for us, thinking that our multiline JSX is just a JavaScript statement whose author simply forgot to add semicolons at the end of the individual lines. @mtf Kindly tell if this is correct
I don’t believe it has anything to do with semi-colons. It’s the syntax that tells the compiler to treat it as a single JSX element which will be compiled into a React object. The only semi-colon in that statement would go at the very end, after the closing ).
The basic reason for adding parentheses around our multi-line JSX is to eliminate anomalies that Javascript might perform such as the insertion of semicolons when we do not need it but it also gives our code structure and readability which is a very important thing in programming as it easies debugging
According to what I’ve learned now, if we want to have a well-organized code with JSX it’s more feasible to use parentheses and group our JSX elements inside a variable