{/* comment */}
Annotate JSX without rendering anything by wrapping a JavaScript comment in curly braces.
{/* comment */}Return value
Nothing — a comment-only expression container is removed at compile time and produces no child in the React element tree.
Errors
Nothing at runtime, but `{ // comment }` written on a single line is a syntax error: the line comment swallows the closing brace, so the expression and the surrounding tag never close.
JSX has no comment syntax of its own. Inside markup you drop into JavaScript with curly braces and put an ordinary comment there: {/* like this */}. The compiler removes the whole expression container, so the text never reaches the DOM and no child is created in the element tree.
Where comments are legal
- As a child, single- or multi-line:
{/* block */}. - As a child written with
//, as long as the closing}sits on a later line. - Between attributes in an opening tag, where a bare
//or/* */works without braces. - Inside any attribute expression:
title={/* why */ label}.
What trips people up
HTML comments are a syntax error. <!-- … --> is not JSX; the parser reads < as the start of an element and fails on the !.
Plain text is not a comment. Slashes typed directly in children render literally — <li>// draft</li> puts // draft on the page.
Block comments do not nest. Commenting out a chunk of JSX that already contains {/* … */} ends the outer comment at the first */, and the leftover */} becomes visible text or a parse error.
Above the return, in ordinary function-body scope, use normal JavaScript comments. The braces are only needed once you are inside markup.
Example
When to use it
- Explain a non-obvious calculation right next to the markup that consumes it
- Temporarily disable a block of JSX without deleting it from the file
- Leave a TODO where a component will be slotted in later
- Record why an aria- or data- attribute is set to a particular value
Frequently asked questions
How do you comment out code in JSX?
Wrap it in curly braces with a block comment: `{/* <LegacyToggle /> */}`. The element and its props are removed at compile time, so nothing inside is evaluated. For a comment above the `return` statement — anywhere in normal function-body scope — plain `//` and `/* */` work without braces.
Why doesn't <!-- --> work in React?
Because JSX is JavaScript syntax, not HTML: the parser sees `<` and expects an element name, then fails on `!`. Use `{/* … */}` instead. If you genuinely need an HTML comment in the output you would have to write it as a string and use dangerouslySetInnerHTML, which is almost never worth it.
Can you write a // comment inside JSX?
Yes, in two places: inside braces as a child, and between attributes in an opening tag. As a child it must be `{` newline `// text` newline `}` — putting the closing brace on the same line makes the comment swallow it and produces a syntax error. Between attributes, `//` needs no braces at all, since a newline ends it before the next attribute.
More examples
Every legal placement in one tag
Compiles cleanly and renders a single <section id="demo" title="Placements"> containing only <p>Visible text</p>. All four comments disappear at build time — the emitted createElement call receives just the one child, so comment-only braces never show up as empty text nodes.
function Placements() {
// Outside the markup, ordinary comments work as usual.
const label = "Placements";
return (
<section
// a line comment between attributes ends at the newline
id="demo"
title={/* inline block comment in an expression */ label}
>
{/* 1. block comment as a child */}
{
// 2. line comment as a child; the } is on its own line
}
<p>Visible text</p>
{/*
3. a multi-line block comment
spanning several lines
*/}
</section>
);
}Commenting out markup
The LegacyToggle element is removed at compile time — its props are not evaluated, so `save` is never read and an undefined reference inside a commented-out block cannot crash the render. The second comment demonstrates the nesting trap: an inner `*/` terminates the outer comment early, and everything after it is parsed as live JSX again.
function Panel() {
return (
<div>
<h3>Settings</h3>
{/* <LegacyToggle name="beta" onChange={save} /> */}
<p>The beta toggle is disabled for this release.</p>
{/*
Careful: you cannot wrap a block that already
contains a comment, because the first */}
<p>Block comments do not nest.</p>
</div>
);
}Text that only looks like a comment
Four list items render, but only three have content: "// this renders as literal text", then an empty <li>, then "/* a string that looks like a comment */" and the HTML-comment text. Children in JSX are text unless braces put you back into JavaScript, which is why the first line ships to production as visible slashes and why <!-- --> written directly in markup is a parse error rather than a comment.
function Notes() {
return (
<ul>
<li>// this renders as literal text</li>
<li>{/* this renders nothing */}</li>
<li>{"/* a string that looks like a comment */"}</li>
<li>{`<!-- HTML comments must be a string too -->`}</li>
</ul>
);
}
Discussion