no-comment-textnodes

Full Name in eslint-plugin-react-jsx

react-jsx/no-comment-textnodes

Full Name in @eslint-react/eslint-plugin

@eslint-react/jsx-no-comment-textnodes

Presets

recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Rule Details

This rule prevents comment strings (ex: beginning with // or /*) from being accidentally inserted into a JSX element's text nodes.

Comments inside JSX elements should be placed inside braces ({/* comment */}) to prevent them from being rendered as text.

Common Violations

Invalid

function MyComponent() {
  return (
    <div>
      // This will be rendered as text
      /* This will also be rendered as text */
    </div>
  );
}

Valid

function MyComponent() {
  return (
    <div>
      {/* This is a valid comment inside JSX */}
      <span>Hello</span>
    </div>
  );
}

Resources

• Rule Source
• Test Source