Wisdom Geek

How to write comments in React (JSX)?

How to write comments in React (JSX)?

Wisdom Geek's photo
Wisdom Geek
·

1 min read

react

I was recently trying to comment out some logic inside my JSX to add context about what a potentially complex logic, but realized that comments in JSX are weird. So how to write comments in React (JSX)?

You cannot use HTML comments because they are parsed as DOM nodes:

const doesNotWork = () => {
  return <!-- Does not work -->
}
const doesNotWork2 = () => {
  return (
    // not a valid comment
  )
}

To write comments in React (JSX), we need to wrap them in curly braces.

const doesWork = () => {
  return {/* this works */ }
}

The curly braces tell the JSX parser to parse the code inside as JavaScript, and not a string.

Since the contents inside are parsed as JavaScript, this enables us to also do multi-line or single-line comments:

const doesWork = () => {
  return <>
  {
    /*
      mult-line
      test
    */
  }
  {
      // single-line test
  }
  </>
}

In the case of a single-line comment, You cannot have the ending bracket in the same line, because that will break everything.

The post How to write comments in React (JSX)? appeared first on Wisdom Geek.

JavaScriptReactJSXReact