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
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
Love web dev? Join the Isotropic weekly newsletter.
cross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
0

Your Cart is Empty