Maksim Ivanov
React courseStart herePosts

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:

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

Even though JSX will be compiled to Javascript - you can’t use regular JS comments. They willbe 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.