How to use comments in React

Question

How can I use comments inside the render method in a React component?

I have the following component:

'use strict'; var React = require('react'), Button = require('./button'), UnorderedList = require('./unordered-list'); class Dropdown extends React.Component{ constructor(props) { super(props); } handleClick() { alert('I am click here'); } render() { return ( <div className="dropdown"> // whenClicked is a property not an event, per se. <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button> <UnorderedList /> </div> ) } } module.exports = Dropdown;

Enter image description here

My comments are showing up in the UI.

What would be the right approach to apply single and multiple line comments inside a render method of a component?

Good question with single answer. Do not be fooled by 12 answers! They all talk about the same thing: {/* JSX comment*/} — Jack Miller
– Jack Miller, Commented Nov 8, 2019 at 10:07
Within React(JSX), you can use {/* comment here */}, however for javascript // comment here works. So, the answer depends on where you want to comment. — muditrustagii
– muditrustagii, Commented Jan 24, 2021 at 4:30
Most modern IDEs like VSCode and CodeSandbox already know about this issue. They will write the right comment syntax for you automatically when you press on the comment shortcut CTRL+/ or ⌘+/ for macOS. — Islam Alshnawey
– Islam Alshnawey, Commented Jun 14, 2022 at 0:37
@JackMiller Okay, sorta -- as anandharshan points out, you can use { // comment with the unfortunate side-effect that you have to put the closing } on another line. Which stinks, because the {/* JSX comment*/} comment breaks, eg, trying to insert a block comment that completely wraps a JSX section with the /* */ construction. Why would I block comment out a JSX block? Maybe to temporarily have another return while testing. Not saying super-common, but I was hoping for a better work-around for that case than a line with a lone }. — ruffin
– ruffin, Commented Oct 30, 2023 at 12:21

Peter Mortensen · Accepted Answer · 2021-10-30 22:25:18Z

514

Within the render method comments are allowed, but in order to use them within JSX, you have to wrap them in braces and use multi-line style comments.

<div className="dropdown"> {/* whenClicked is a property not an event, per se. */} <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button> <UnorderedList /> </div>

You can read more about how comments work in JSX here.

edited Oct 30, 2021 at 22:25

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 10, 2015 at 20:20

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adil Over a year ago

I don't know why but it always gives me a feelings of bad code or something wrong in the code. in other words, it seems like commenting isn't adjusting in my code in this way. I'm not sure if I was used of double slashes style // commenting

Amish Shabani Over a year ago

And something like <div></div> {/* comment */} creates error. comment must be in a new line.

danb4r Over a year ago

Do not forget to add the empty tag <></> in case you have only one element in your render function, otherwise the comment will be counted as another element and brake the code.

Bart Riordan · Accepted Answer · 2017-01-03 00:23:44Z

Here is another approach that allows you to use // to include comments:

return ( <div> <div> { // Your comment goes in here. } </div> { // Note that comments using this style must be wrapped in curly braces! } </div> );

The catch here is you cannot include a one-line comment using this approach. For example, this does not work:

{// your comment cannot be like this}

because the closing bracket } is considered to be part of the comment and is thus ignored, which throws an error.

@LukeCarelsen It does work actually because he enclosed the // in square brackets.
Smart, It works perfectly. The reason I want this approach is so that the better comments extension in VS Code works.

Peter Mortensen · Accepted Answer · 2021-10-30 23:17:06Z

On the other hand, the following is a valid comment, pulled directly from a working application:

render () { return <DeleteResourceButton // Confirm onDelete = {this.onDelete.bind(this)} message = "This file will be deleted from the server." /> }

Apparantly, when inside the angle brackets of a JSX element, the // syntax is valid, but the {/**/} is invalid. The following breaks:

render () { return <DeleteResourceButton {/* Confirm */} onDelete = {this.onDelete.bind(this)} message = "This file will be deleted from the server." /> }

@MinhNghĩa, I looked for different comment use-cases in the docs but couldn't find any. If anybody can find something, please share!

Divyanshu Maithani · Accepted Answer · 2019-06-18 07:58:21Z

Besides the other answers, it's also possible to use single line comments just before and after the JSX begines or ends. Here is a complete summary:

Valid

( // this is a valid comment <div> ... </div> // this is also a valid comment /* this is also valid */ )

If we were to use comments inside the JSX rendering logic:

( <div> {/* <h1>Valid comment</h1> */} </div> )

When declaring props single line comments can be used:

( <div className="content" /* valid comment */ onClick={() => {}} // valid comment > ... </div> )

Invalid

When using single line or multiline comments inside the JSX without wrapping them in { }, the comment will be rendered to the UI:

( <div> // invalid comment, renders in the UI </div> )

The syntax highlighting on this site does not seem to agree.

Peter Mortensen · Accepted Answer · 2021-10-30 23:36:32Z

According to the official site, these are the two ways:

<div> {/* Comment goes here */} Hello, {name}! </div>

Second example:

<div> {/* It also works for multi-line comments. */} Hello, {name}! </div>

Here is the reference: How can I write comments in JSX?

YakovL · Accepted Answer · 2021-08-18 10:29:11Z

To summarize, JSX doesn't support comments, either html-like or js-like:

<div> /* This will be rendered as text */ // as well as this <!-- While this will cause compilation failure --> </div>

and the only way to add comments "in" JSX is actually to escape into JS and comment in there:

<div> {/* This won't be rendered */} {// just be sure that your closing bracket is out of comment } </div>

if you don't want to make some nonsense like

<div style={{display:'none'}}> actually, there are other stupid ways to add "comments" but cluttering your DOM is not a good idea </div>

Finally, if you do want to create a comment node via React, you have to go much fancier, check out this answer.

Ramesh R · Accepted Answer · 2025-04-24 16:23:24Z

Two ways to add comments in React Native

// (double forward slash) is used to comment only a single line in React Native code, but it can only be used outside of the render block. If you want to comment in a render block where we use JSX, you need to use the second method.
If you want to comment on something in JSX you need to use JavaScript comments inside of curly braces like {/* Comment here */}. It is a regular /* Block comment */, but it needs to be wrapped in curly braces.

Shortcut keys for /* Block comments */:

Ctrl + / on Windows and Linux OS.
Cmd + / on macOS.

hi Ramesh R can you make sure when you're doing code edits that you don't mess up the indentation - like this stackoverflow.com/revisions/57358471/3 ? thanks
Related: We're switching to CommonMark (2020-06-01) - "Headlines: Moving forward, you have to add a space after the leading # characters"

Mehdi Raash · Accepted Answer · 2017-04-29 15:52:19Z

This is how.

Valid:

... render() { return ( <p> {/* This is a comment, one line */} {// This is a block // yoohoo // ... } {/* This is a block yoohoo ... */ } </p> ) } ...

Invalid:

... render() { return ( <p> {// This is not a comment! oops! } {// Invalid comment //} </p> ) } ...

harun ugur · Accepted Answer · 2019-10-10 19:58:41Z

14

{/* <Header /> <Content /> <MapList /> <HelloWorld /> */}

answered Oct 10, 2019 at 19:58

harun ugur

1,87222 silver badges20 bronze badges

Comments

bannedFromAskingQuestions · Accepted Answer · 2019-01-06 05:59:01Z

JSX Comments Syntax: You can use

{/** your comment in multiple lines for documentation **/}

or

{/* your comment in multiple lines */}

for multiple lines comment. And also,

{ //your comment }

for single line comment.

Note: The syntax:
{ //your comment } 
doesn't work. You need to type braces in new lines.

Curly braces are used to distinguish between JSX and JavaScript in a React component. Inside curly braces, we use JavaScript comment syntax.

Reference: click here

Are you sure the single line comment syntax is valid? Your reference doesn't show it.
Yes. I am pretty sure. I could not find a reference for it, but I have tested it myself. Also, as I mentioned in the answer, we can use javascript single line syntax in JSX using curly braces.

Manuel Abascal · Accepted Answer · 2019-08-28 15:20:25Z

According to React's Documentation, you can write comments in JSX like so:

One-line Comment:

<div> {/* Comment goes here */} Hello, {name}! </div>

Multi-line Comments:

<div> {/* It also works for multi-line comments. */} Hello, {name}! </div>

Peter Mortensen · Accepted Answer · 2021-10-30 23:24:24Z

7

{ // Any valid JavaScript expression }

If you wonder why it works, it's because everything that's inside curly braces { } is a JavaScript expression.

So this is fine as well:

{ /* Yet another JavaScript expression */ }

edited Oct 30, 2021 at 23:24

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 6, 2018 at 19:47

Bar Horing

6,1054 gold badges36 silver badges30 bronze badges

2 Comments

Irshad Babar Over a year ago

{//} this isn't working, I have checked, can you please specify, I am trying to comment it inside the render function, this only works if there is new line after the curly brace and same case for the closing curly brace (it should be on the new line),

Peter Mortensen Over a year ago

@Irshad Babar: "this isn't working": What happens (or doesn't happen)? What are the symptoms?

Peter Mortensen · Accepted Answer · 2021-10-30 23:14:07Z

JavaScript comments in JSX get parsed as text and show up in your application.

You can’t just use HTML comments inside of JSX because it treats them as DOM nodes:

render() { return ( <div> <!-- This doesn't work! --> </div> ) }

JSX comments for single line and multiline comments follows the convention

Single line comment:

{/* A JSX comment */}

Multiline comments:

{/* Multi line comment */}

Ciro Santilli OurBigBook.com · Accepted Answer · 2022-07-30 08:55:05Z

Conditional rendering

This approach mentioned on the React docs will also work with nested /**/ comments, unlike the {/**/} approach, e.g.:

{false && <> <div> Commented out. /* Anything goes. */ </div> </>}

Full example:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello, World!</title> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <div> before {false && <> <div> Commented out. /* Anything goes. */ </div> <div> Also commented out. /* Anything goes. */ </div> </>} after </div> , document.getElementById('root') ); </script> </body> </html>

renders just beforeafter.

Ah, just noticed, one downside of this is that linters like typescript could complain about stuff in the "comment" that is not correct.

Code on the Rocks · Accepted Answer · 2022-10-08 22:03:42Z

Here are 6 ways of commenting in React:

/** * 1. Multi-line * TypeScript comment * @constructor */ export const GoodQuote = observer(({model} : { model: HomeModel }) => { console.log(model.selectedIndex) return useObserver(() => <div /* 2. HTML attribute comment */ onClick={() => model.toggleQuote()}> <p>{model.quotes[model.selectedIndex]}</p> { // 3. Single-line comment } { /* 4. True Single-line comment */} { /* 5. Multi-line React comment */ } </div> // 6. Javascript style comment ) })

christian_js · Accepted Answer · 2023-04-20 17:45:45Z

To write comments in JSX markup, you have to put them inside of curly braces { }

This is because without telling React that the comments is JavaScript code, it will read every slash / as part of an HTML node.

You can find more details about comments in JSX at https://thelonecoder.dev/javascript/react-js/how-to-write-comments-in-react/

Here's how to properly add the comment you tried to write in your render method:

 render() { return ( <div className="dropdown"> { // whenClicked is a property not an event, per see. } <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button> <UnorderedList /> </div> ) }

Note that you have to add a single-line // comment on its own line, otherwise you will be commenting out the closing brace }

The same syntax works for multi-line /* */ comments:

{ /* This is a multi-line comment! */ }

Collectives™ on Stack Overflow

How to use comments in React

16 Answers 16

3 Comments

2 Comments

2 Comments

Valid

Invalid

1 Comment

Comments

Comments

Two ways to add comments in React Native

2 Comments

Comments

Comments

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

3 Comments

2 Comments

2 Comments

Valid

Invalid

1 Comment

Comments

Comments

Two ways to add comments in React Native

2 Comments

Comments

Comments

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Related