Rules
jsx-no-comment-textnodes
Prevents comment strings (e.g., beginning with `//` or `/*`) from being accidentally inserted into a JSX element's text nodes.
Full Name in @eslint-react/eslint-plugin
@eslint-react/jsx-no-comment-textnodesFull Name in eslint-plugin-react-x
react-x/jsx-no-comment-textnodesPresets
x
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
This could be a mistake during code editing or a misunderstanding of how JSX works. Either way, it's probably not what you intended.
Common Violations
Invalid
function MyComponent1() {
return <div>// empty div</div>;
// ^^^ Possible misused comment in text node. Comments inside the children section of a tag should be placed inside braces.
}
function MyComponent2() {
return <div>/* empty div */</div>;
// ^^^ Possible misused comment in text node. Comments inside the children section of a tag should be placed inside braces.
}Valid
function MyComponent() {
return <div>{/* empty div */}</div>;
}Legitimate uses
You may want to legitimately output comment start characters (// or /*) in a JSX text node. In that case, you can do the following:
function MyComponent() {
// 🟢 Good: This is a legitimate use of comment strings in JSX text nodes
return <div>{"/* This will be output as a text node */"}</div>;
}Resources
Further Reading
See Also
jsx-dollar
Prevents unintentional$sign before expression