commentTextNodes

Reports JSX text nodes that contain comment syntax but are rendered as text.

✅ This rule is included in the jsx logical preset.

In JSX, text that looks like comments (// or /* */) is rendered as literal text unless it’s wrapped in braces. This can lead to confusion where developers think they’re adding comments, but the text actually appears in the rendered output.

To add actual comments in JSX, wrap them in braces: {/* comment */} or {// comment}.

Examples

❌ Incorrect

<div>// This looks like a comment but will be rendered</div>

<span>/* This also looks like a comment */</span>

<p>// comment text</p>

<div>Some text // followed by comment-like syntax</div>

✅ Correct

<div>{/* This is an actual comment */}</div>

<div>
  {/* Comment inside expression */}
  Regular text content
</div>

<span>
  {
    // Single line comment
  }
</span>

<div>Regular text without comment syntax</div>

When Not To Use It

If you intentionally want to display text that looks like comments (for example, in a code tutorial or documentation site), you may want to disable this rule for those specific files.

Further Reading

• React: JSX In Depth - Comments
• MDN: JSX

Equivalents in Other Linters

• Deno: jsx-no-comment-text-nodes
• ESLint: react/no-comment-textnodes