Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (retired) Thinking in Components Properties

Chris Davis
Chris Davis
16,280 Points
Posted by Chris Davis
Chris Davis
16,280 Points

Is there a way to add comments to react.js jsx code?

Sometimes when you have a bunch of nested divs and tags it nice to be able to add a comment at the closing tag to keep track of your markup. Is there a way to add comments in jsx? I'd like to be able to do something like this...

function Application(props) {
  return (
    <div className="myClass">
      <div className="myOtherClass">
        <h1>My Title</h1>
      </div>/* End of myOtherClass */
    </div>/* End of myClass */
  );
}

I searched the internets and found that you can add curly braces around your jsx comments like this... {/* my comment*/} however this is not working for me.

9 Answers

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Maybe

// Comment

?

This is right in JSX

{/* <Card title="Customer"> */}

My editor did it for me, and it works :)

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

But this is HTML.

So what you do is this

<!-- comment -->

Try this or the other one

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

I'm using Visual Studio Code, and when you hit ctrl + /, the editor automatically inserts the appropriate comment flags for whatever language you're coding in. For jsx, it did use the syntax you mentioned:

{/*  This is a jsx comment */}

The code highlighting is a little strange, it actually only grays out the /* */ and the curly braces look normal, but it seems to be working. Probably a workspaces issue, I know there's usually some quirks like that for newer languages or features.

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

To further complicate things, looks like comment flags vary by whether or not you're inside of a component. My text editor (VS Code) inserts normal JavaScript // comment flags outside of the component, and also accepts multiline /* */ syntax.

More info here... How to Comment in React JSX

// This is a comment outside of a component, with normal JavaScript syntax
/* 
And this is a multiline comment
*/
function Application(props) {
  // This is a comment inside the component function
  return (
    // This is also a comment
    <div className="container">
      <h1>Some Heading</h1> {/* but so is this */}
      {/* and this */}
      // but not this
      /* 
      or this
       */
      <!-- and definitely not this -->
    </div>
  );
}

From a little experimenting, it looks like you only have to worry about the weird {/* */} syntax if you are inside of the xml-like syntax in your function. If you type the // but not this and /* or this */ comments as above inside your <div>, they will render inside your div on the page, but the comments enclosed in {/* */} will not. An xml/html <!-- --> comment will throw an error because the compiler will want to interpret it as a DOM node.

I'm definitely starting to see the quirks of a hybrid language like jsx...

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

Alright, just had an "Aha" moment... the curly braces around the /* */ are used to escape the comment from the xml syntax and mark it as normal JavaScript, like what Jim did for {props.title} when it was inside the <h1>. This is why the comments need to be wrapped in curly braces when they're inside of your component, but not elsewhere in the code (since you can write normal JavaScript in JSX). This is also why you have to use /* */ instead of // inside the curly braces: // comments out everything after it to the end of the line, so it would also comment out your ending curly brace.

This also explains why in VSCode, at least, only the /* */ is grayed out, and not the { }: the curly brackets aren't actually part of the comment, they're just telling the compiler that whatever's inside them is JavaScript.

So, inside your component, comments should be:

<div>
  {/* This is a comment */}
</div>

And outside, they're just written as normal JavaScript comments:

// This is also a comment
/* And so
is this */
Chris Davis
Chris Davis
16,280 Points
Chris Davis
Chris Davis
16,280 Points

It's actually not html, it's jsx which is used in react.js. The syntax is similar but not the same. So far i have tried...

//Did not work
<!--Did not work-->
/*Did not work*/
{/*Did not work*/}
Chris Davis
Chris Davis
16,280 Points
Chris Davis
Chris Davis
16,280 Points

Thanks for the links Aurelian, i appreciate it. I tried all of those solutions and still did not work. I wonder if it is a workspaces issue?

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I'm not up to date with this technology, nor I know it, but I believe that sometimes it could be workspace issue.

Or maybe you did something wrong in your code, and it won't compile it properly?

OR

maybe you need space?

{/* Did not work */}

like this?

Alonso Serrano
Alonso Serrano
15,341 Points
Alonso Serrano
Alonso Serrano
15,341 Points

{/* A good comment */} This worked for me in the Atom text editor.

Chris Davis
Chris Davis
16,280 Points
Chris Davis
Chris Davis
16,280 Points

Thanks for your help man :thumbsup:

Chris Davis
Chris Davis
16,280 Points
Chris Davis
Chris Davis
16,280 Points

Very useful info Gabbie! Thank You!

Gonzalo Blasco
Gonzalo Blasco
10,405 Points
Gonzalo Blasco
Gonzalo Blasco
10,405 Points

As many said above me... It's

{/* Comment */}

Chris Davis
Chris Davis
16,280 Points
Chris Davis
Chris Davis
16,280 Points

I'm getting back into React following Andrew Mead's Complete React Developer Course and I have finally verified this more than a year later! As stated above, you have to open a JavaScript expression {} then place your comment tag /* */ inside of that. Why this didn't work in my Treehouse workspace is unknown, however, I'm using the Visual Studio Code editor and it works as expected.

{/* comment */}