Enclose A JSX Comment In Braces

Reports a comment written among a JSX element’s children without the braces that make it a comment. JSX children are markup, not code: the characters are rendered.

Inside JSX children a comment has to be an expression, which means braces. Written bare it is text, and React renders it — the comment shows up on the page, usually pushed into a layout that was not expecting it.

It is a natural mistake to make, because the same characters two lines up, outside the markup, are a comment. That is exactly the distinction the rule has to draw: a comment immediately above a <div> is fine, and a comment immediately above a <span> inside that div is not. Both precede the same token, so the comment’s own position decides — the innermost node that encloses it is found by walking up from the token that follows it, and only a JSX element or fragment answering there means the comment landed among children. A brace pair answers with the child expression and an opening tag answers with itself, so the correct spellings are silent by construction.

One caveat, measured against this parser rather than assumed: the lexer scans // as a line comment wherever it appears, so a single-line comment among JSX children is only visible when the markup survives it. It does when the comment sits on a line of its own; it does not when the comment follows children on the same line, because the rest of that line is swallowed and the file fails to parse. The block form is unaffected.

Wrap the comment in braces so it becomes an expression: {/* the total */}. Move it above the JSX expression instead when it is about the whole block, where an ordinary comment is fine. Put a comment about one attribute inside the opening tag, which is JavaScript context and needs no braces.