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 -->.

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.

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.

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).