Disallow comments from being inserted as text nodes (`react/jsx-no-comment-textnodes`)

💼 This rule is enabled in the ☑️ recommended config.

This rule prevents comment strings (e.g. beginning with // or /*) from being accidentally injected as a text node in JSX statements.

Rule Details

Examples of incorrect code for this rule:

var Hello = createReactClass({
  render: function() {
    return (
      <div>// empty div</div>
    );
  }
});

var Hello = createReactClass({
  render: function() {
    return (
      <div>
        /* empty div */
      </div>
    );
  }
});

Examples of correct code for this rule:

var Hello = createReactClass({
  displayName: 'Hello',
  render: function() {
    return <div>{/* empty div */}</div>;
  }
});

var Hello = createReactClass({
  displayName: 'Hello',
  render: function() {
    return <div /* empty div */></div>;
  }
});

var Hello = createReactClass({
  displayName: 'Hello',
  render: function() {
    return <div className={'foo' /* temp class */}</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:

var Hello = createReactClass({
  render: function() {
    return (
      <div>{'/* This will be output as a text node */'}</div>
    );
  }
});

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!