How to add comments in JSX

JSX (JavaScript XML) is an extended form of JavaScript language syntax that provides a way to write HTML and JavaScript together. React developers are very familiar with JSX.

Like other languages, JSX provides us with the ability to write comments. Comments aid readability, understandability, maintainability, etc. of a codebase. In other words, we need comments in our code.

Syntax

{/* This is a JSX comment */}

JSX comments begin and end with curly braces {}. Followed by the opening curly brace is a forward slash/ and an asterisk*. After that is the comment and lastly, an asterisk, a forward slash and the closing curly brace.

Example

Comments, as we know, can be single line or multi-line. In JSX, whether you want to use a single line comment or multi-line comment, the syntax will remain the same.

{/* This is a single line comment */}
{/* This is
a multiline
comment */}

Note: Only /* */ is used inside the curly braces. Any other character like the popular double forward slash //, will throw an error.

Thanks for reading!