Why do semicolons throw error in react JSX?

Question

Below is part of my render method in JSX - why does the semicolon after the }) throw an error? It's perfectly fine in normal JavaScript

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

Answer 1

It's because JSX {} expressions are limited to a single expression.

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

..will throw an error.

However you can solve this by having two {} expressions

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

There's no need for semi-colons if there will only be a single expression.

If you want to get all hacky about it, you can use the lesser known comma operator in expressions to do some local work, before returning the last expression separated by commas:

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

Which will display <div>20</div>

You might not need semi-colons anywhere.