How to Write Comments in React: The Good, the Bad and the Ugly

I like React because its syntax is JavaScript, except when you write JSX.

When it comes to writing comments, React offers the syntax {/* Comment */}. To me, this syntax is a bit verbose.

Let's see how to use the regular JSX comments and other 2 better ways to comment.

The regular way to write comments in JSX is using the following syntax:

{/* message prop requires a string */ } is a regular JSX comment.

You can also write multi-line comments:

If you want to get rid of /* */ symbols and use // for comments, then the following syntax is worth trying too:

In the case of // comments you have to add a newline after the comment.

The good thing about React is that outside JSX it's regular JavaScript code.

You can take advantage of that and write JavaScript comments just before the JSX tag:

// message prop requires a string was added just before the JSX tag as a regular JavaScript comment.

That's a shorter way to comment in JSX because you don't have to use the verbose syntax {/* message prop requires a string */}.

JavaScript's /* Comment */ also works if you have text to split the comment into multiple lines:

If the situation requires, you can add the comment right after closing the JSX tag:

What's interesting is you can write regular JavaScript comments inside of a JSX tag! Just make sure to add a newline after the comment.

You can use it to add comments targeting a prop:

Or add comments targeting a child component:

That's my preferred way of commenting in JSX because it is concise and targets specific elements of the JSX.

4. Conclusion

To resume, you have 3 ways of adding comments in a React component:

1. JSX comments syntax (the ugly)
2. JavaScript comments around JSX (the bad)
3. JavaScript comments inside a JSX tag (the good)




function MyComponent() {

return (

// Comment around JSX

<div>

{/* Comment inside JSX */}

<Hello // comment inside JSX tag

message="Hello, World!" // comment inside JSX tag

/>

</div>

)

}




What is your preferred way to write comments?