isotropic-2022
Share
Blog
Search
Menu

How To Add JSX Comments in React

By James LePage
 on March 13, 2022

How To Add JSX Comments in React

By James LePage
 on March 13, 2022

Adding comments in JSX (JavaScript XML) works a bit differently than regular Javascript comments.

A common question for those getting started in React is "how do you add JSX comments?". If you try to add it like a standard Javascript comment, the text will get parsed and show up on the frontend of your app.

Here's a quick demo of what will happen if you try something <!-- Like This -->.

cleanshot-2022-03-13-at-20-58-572x
Parsing error: Unexpected token. This is because it's trying to render the comment as a DOM element.

Instead, JSX Comments are done in a unique way.

We'll render a comment by using Javascript block comments, and wrapping them in curly braces. The curly braces tell the JSX parser that anything in between them must be interpreted as JavaScript, not a string.

With this approach, we can can do both single line and multi line JSX comments in React.

function CommentDemo() { return ( <div> {/* This way will work! */} </div> ); } function CommentDemoMultiline() { return ( <div> {/* This way will work! I can also do multiple lines as long as it's in the braces. */} </div> ); }

This is the "official" way to add comments in JSX and React.

You can also choose to use // to include comments, but this must be broken into multiple lines, and wrapped in curly braces. If you use this method on a single line, it'll break as the closing curly brace is thought to be part of the comment, breaking things.

function CommentDemoMultiline() { return ( <div> { //This way will work! //I can also do multiple lines as long as it's in the braces. } {// This way will break everything though.} </div> ); }
cleanshot-2022-03-13-at-21-08-112x
When using // the closing curly brace must be on a new line.

This article showed you two ways to add a comment in JSX. This is helpful for documenting your work in React projects. Wrapping something in single curly braces tells the compiler to interpret whatever is within as javascript, which is why these commenting methods work (they're basic JS commenting methods).

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
saibabu
saibabu
1 year ago

Very Intresting Aricle to Read,no boring while reading

Thanks & Regards
V.saibabu

saibabu
saibabu
1 year ago

It is very useful for the students thuse who are preparing 

 Thanks & Regards
  V.saibabu

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram