jsx-no-comment-textnodes

Full Name in eslint-plugin-react-x

react-x/jsx-no-comment-textnodes

Full Name in @eslint-react/eslint-plugin

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

Presets

x
recommended
recommended-typescript
recommended-type-checked

Description

Prevents comment strings (e.g. beginning with // or /*) from being accidentally inserted into the JSX element's textnodes.

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 MyComponent1() {
  return <div>// empty div</div>;
  //          ^^^^^^^^^^^^
  //          - Possible misused comment in text node. Comments inside children section of tag should be placed inside braces.
}

function MyComponent2() {
  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 MyComponent() {
  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 MyComponent() {
  // 🟢 Good: This is a legitimate use of comment strings in JSX textnodes
  return <div>{"/* This will be output as a text node */"}</div>;
}