react/jsx-no-comment-textnodes
Disallow // and /* */ comments written as text between JSX tags
Between JSX tags, // and /* */ don't start a comment. They're text, and your users see it on the page. A comment there must be inside braces.
The rule reports text that has a line starting with // or /*.
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"react/jsx-no-comment-textnodes" = "error" # or "warn"Examples#
example.jsx2 problems
const header = (
<header>Comments inside children section of tag should be placed inside braces
// TODO: add the logo
<h1>Welcome</h1>Comments inside children section of tag should be placed inside braces
/* the subtitle goes here */
</header>
);example.jsxNo problems
const header = (
<header>
{/* TODO: add the logo */}
<h1>Welcome</h1>
<a href="https://bun.com">See https://bun.com</a>
</header>
);To show text like that on purpose, write it as a string in braces:
example.jsxNo problems
const hint = <code>{"// a comment in JavaScript"}</code>;