JSX elements within JS-blocks inside of JSX-blocks need to be wrapped in parentheses

[peitalin]

E.g for a code block like this:

render() {
  return (
    <div>
        { 
            this.showIfTrue &&
            <Modal/>
        }
    <div>
  )
}

The last } will not be correctly highlighted.

You'll need to wrap the <Modal/> element inside the JS-block (inside the JSX-block) in parentheses:

render() {
  return (
    <div>
        { 
            this.showIfTrue &&
            (<Modal/>)
        }
    <div>
  )
}

Alternatively, I've been wrapping the entire block in parentheses for consistency:

render() {
  return (
    <div>
        {( 
            this.showIfTrue &&
            <Modal/>
        )}
    <div>
  )
}

[setthase]

Any plans to fix this issue?

The workaround will not work for projects that use prettier for they code formatting.

[peitalin]

Should be fixed now.

[peitalin]

Should also work for react fragments syntax as well now.