Maksim IvanovProgramming tutorials

How To Comment React JSX Code

May 13, 2018

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:

    <!-- <SomeComponent /> --> // This won't work

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 (
      <Component1 />
      {/* <Component2 /> */}

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:

Share this post: