Why do semicolons throw an error in a JSX reaction?

Question

The following is part of my render method in JSX - why does the semicolon after an })error? This is normal in normal JavaScript.

<ul>
    {
        libraries.map(function (item) {
            return <li>{item.name.toLowerCase()}</li>;
        });
    }
</ul>

Answer 1

This is because JSX expressions are {}limited to one expression.

<div>{2 + 2; 3 + 3}</div>

..throws an error.

However, you can solve this problem using two {}expressions

<div>{2 + 2}{3 + 3}</div>

There is no need for a semicolon if there is only one expression.

, , , , :

let x
...
<div>{x = 20, x}</div>

<div>20</div>

, , .