How To Comment React JSX Code

Sometimes you need to comment out some JSX code or just add some informative comment to your layout. How to do it?

First problem is that JSX is not HTML and HTML comments wont work:

render(){
  <div>
    <!-- <SomeComponent /> --> // This won't work
  </div>
}

Even though JSX will be compiled to Javascript - you can't use regular JS comments. They will be parsed as text and added to your layout.

So the only working option is to use multiline comments inside curly braces:

render() {
  return (
    <div>
      <Component1 />
      {/* <Component2 /> */}
    </div>
  )
}

Editor Support

Now, good news if you use VSCode, you can press Ctrl + / and it will add {/* */} around selected lines.

More About JSX

Btw I wrote a couple of new articles about JSX:

• Starting With JSX
• Conditions Inside JSX