mangocaptain mangocaptain - 1 year ago 156
React JSX Question

Why do semicolons throw error in react JSX?

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

{ (item) {
return <li>{}</li>;

Answer Source

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>

While will display <div>20</div>

You might not need semi-colons anywhere.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download