try-catch statement in React JSX

Question

According to the JSX reference, this is what a try-catch statement must look like

try {
  statement*
} [catch (varname : type) {
  statement*
}]* [finally {
  statement*
}]

I tried the following

try {
  console.log(window.device.version)
} catch (e : TypeError) {
  console.log('Error')
}

Which results in the error

Module build failed: SyntaxError: Unexpected token, expected ) (11:15)

9  |     try {
10 |       console.log(window.device.version)
11 |     } catch (e : TypeError) {
   |                ^
12 |       console.log('Error')
13 |     }
14 |     return (

What is the correct way to use a try-catch statement in JSX then ?

Answer 1

React JSX

It looks like a TypeScript style. Just use try{ } catch(e) { console.error(e); } would be fine.

Take a look at MDN, and don't forget that JSX is just a syntax sugar for React.createElement.

JSX - a faster, safer, easier JavaScript

The link you mentioned is not react React JSX, but a whole new thing call DeNA JSX.

Take a look at this issue in DeNA JSX, and this PR.