JSX Comments

In the last lesson you learned about JSX Attributes. Now let’s cover something small but handy: how to leave comments inside JSX, since the usual way breaks there.

🤔 Why JSX Comments Trip People Up

Here is the pain. You are writing JSX, you want to leave a quick note next to a piece of your UI, so you reach for what you already know:

• Maybe you try an HTML comment, the kind you use in a web page. Or you drop in a // line comment, like in normal JavaScript.
• React then throws an error, or it just prints your comment as text on the screen. Confusing, right?
• The fix is simple once you see it. Inside JSX, a comment is just a normal JavaScript block comment wrapped in curly braces. That is the whole trick.

🧩 What a JSX Comment Looks Like

JSX has these special spots called expression slots, and a comment lives in one of them:

• An expression slot is a place where you put a pair of curly braces, and React reads whatever JavaScript is inside.
• You have already used these for values, for example putting a name or a number on the screen.
• A comment uses that same slot. You open curly braces, then write a normal /* ... */ block comment inside.

Here is a component with a comment sitting between two elements.

function Profile() {
  return (
    <div>
      <h1>Alex Morgan</h1>
      {/* This is a JSX comment. React ignores it. */}
      <p>Frontend developer</p>
    </div>
  );
}

Let’s walk through that comment line.

• The { opens an expression slot, the same kind you use for values.
• Inside it, /* ... */ is a regular JavaScript block comment.
• The } closes the slot.
• React reads the slot, sees only a comment, and renders nothing for it. So your note stays in the code and never shows up on the screen. That is exactly what you want.

Alex Morgan
Frontend developer

🚫 Why the Usual Ways Don’t Work

This is the part that catches everyone, so let’s be clear about it. Two common comment styles you might reach for will not work between JSX tags:

• An HTML comment does not work. JSX may look like HTML, but it is not HTML, so this <!-- ... --> style is not understood here and it will break your code.
• A plain // line comment also does not work directly between tags. React cannot read it as a comment there, so it breaks the JSX and you get a syntax error when the code compiles.

Here is the wrong way next to the right way.

function Profile() {
  return (
    <div>
      {/* ❌ Avoid: these do NOT work between JSX tags */}
      {/* <!-- HTML comment --> would break */}
      {/* a bare // line comment would also break */}

      {/* ✅ Good: curly braces around a block comment */}
      <h1>Alex Morgan</h1>
    </div>
  );
}

📝 Comments Outside JSX Are Just Normal JavaScript

Now here is the good news. The curly-brace rule only applies inside the returned JSX:

• Everywhere else in your file, you are writing plain JavaScript, so you use plain JavaScript comments.
• That means above the return, or off to the side of your logic, you use // and /* */ exactly like always.

This example shows both worlds in one component.

function Profile() {
  // ✅ Normal JS comment, outside the JSX
  const role = "Frontend developer";

  /* This block comment also works fine here,
     because we are still in plain JavaScript. */

  return (
    <div>
      <h1>Alex Morgan</h1>
      {/* Inside JSX you need the curly-brace form */}
      <p>{role}</p>
    </div>
  );
}

See the split?

• Outside the return, comments are normal JavaScript.
• Inside the returned JSX, you switch to the {/* ... */} form.
• Same file, two simple rules that depend on where you are.

Here is a quick reference for where each style belongs.

⚠️ Common Mistakes

A few things people get wrong when they first start commenting in JSX:

• Using <!-- --> between JSX tags. It is HTML, not JSX, so it breaks. Use the curly-brace form instead.
• Dropping a bare // comment directly between tags. It breaks the JSX. Wrap it like {/* ... */}, or move it outside the return.
• Forgetting the curly braces and writing only /* ... */ between tags. The braces are what tell React this is an expression slot, so they are required there.
• Trying to put a JSX comment inside a tag’s attribute list, like in the middle of <input ... />. That spot does not accept a comment slot. Put your note on the line above the element instead.

✅ Best Practices

Small habits that keep your comments clean and helpful:

• Inside JSX, always use {/* ... */}. Make it muscle memory so you never reach for the wrong style.
• Keep comments short and about the why, not the what. The code already shows what it does.
• For longer notes about your logic, write them above the return as normal JS comments, where they read more naturally.
• Delete comments that no longer match the code. A wrong comment is worse than no comment.

🧩 What You’ve Learned

✅ A JSX comment is a normal block comment wrapped in curly braces: {/* ... */}.

✅ The curly braces work because they open an expression slot, the same slot you use for values.

✅ HTML comments (<!-- -->) and bare // line comments do not work directly between JSX tags.

✅ Outside the returned JSX, you are in plain JavaScript, so // and /* */ work as usual.

✅ Comments render nothing on the screen. They stay in your code as notes for people.

🚀 What’s Next?

Now that you can leave clean notes in your JSX, let’s make your UI react to conditions and show different things at different times.

JSX Conditional Rendering