noCommentText (since v0.7.0)

This rule is recommended by Rome.

Prevent comments from being inserted as text nodes

Examples

Invalid

const a3 = <div>// comment</div>;

error[jsx/noCommentText]: Wrap comments inside children within braces.
  ┌─ jsx/noCommentText.js:1:17
  │
1 │ const a3 = <div>// comment</div>;
  │                 ^^^^^^^^^^

Suggested fix: Wrap the comments with braces
    | @@ -1 +1 @@
0   | - const a3 = <div>// comment</div>;
  0 | + const a3 = <div>{/* comment*/}</div>;

const a4 = <div>/* comment */</div>;

error[jsx/noCommentText]: Wrap comments inside children within braces.
  ┌─ jsx/noCommentText.js:1:17
  │
1 │ const a4 = <div>/* comment */</div>;
  │                 ^^^^^^^^^^^^^

Suggested fix: Wrap the comments with braces
    | @@ -1 +1 @@
0   | - const a4 = <div>/* comment */</div>;
  0 | + const a4 = <div>{/* comment */}</div>;

const a5 = <div>/** comment */</div>;

error[jsx/noCommentText]: Wrap comments inside children within braces.
  ┌─ jsx/noCommentText.js:1:17
  │
1 │ const a5 = <div>/** comment */</div>;
  │                 ^^^^^^^^^^^^^^

Suggested fix: Wrap the comments with braces
    | @@ -1 +1 @@
0   | - const a5 = <div>/** comment */</div>;
  0 | + const a5 = <div>{/* comment */}</div>;

Valid

const a = <div>{/* comment */}</div>;
const a1 = <div>{/** comment */}</div>;
const a2 = <div className={"cls" /* comment */}></div>;