no-comment-textnodes
Full Name in eslint-plugin-react-x
react-x/no-comment-textnodesFull Name in @eslint-react/eslint-plugin
@eslint-react/no-comment-textnodesFeatures
🔍
Presets
corerecommendedrecommended-typescriptrecommended-type-checked
What it does
Prevents comment strings (e.g. beginning with // or /*) from being accidentally inserted into the JSX element’s textnodes.
Why is this bad?
This could be a mistake during code editing or it could be a misunderstanding of how JSX works. Either way, it’s probably not what you intended.
Examples
Failing
import React from "react";
function Example() {
return <div>// empty div</div>;
// ^^^^^^^^^^^^
// - Possible misused comment in text node. Comments inside children section of tag should be placed inside braces.
}
function Example2() {
return <div>/* empty div */</div>;
// ^^^^^^^^^^^^^^^
// - Possible misused comment in text node. Comments inside children section of tag should be placed inside braces.
}Passing
import React from "react";
function Example() {
return <div>{/* empty div */}</div>;
}Legitimate uses
It’s possible you may want to legitimately output comment start characters (// or /*) in a JSX text node. In which case, you can do the following:
import React from "react";
function Example() {
// @annotate: This is a legitimate use of comment strings in JSX textnodes
return <div>{"/* This will be output as a text node */"}</div>;
}