Avoid comments from being inserted as text nodes

This page is not yet available in Spanish. We are working on its translation.
If you have any questions or feedback about our current translation project, feel free to reach out to us!

Metadata

ID: tsx-react/jsx-no-comment-textnodes

Language: TypeScript

Severity: Warning

Category: Error Prone

Description

As JSX mixes HTML and JavaScript together, comments in text nodes must be in brackets to be evaluated as JavaScript instead of HTML. This rule prevents you from accidentally leaving comments as HTML text.

Non-Compliant Code Examples

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

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

Compliant Code Examples

<Paragraph>
    lorem ipsum
    <InlineCode>http://localhost:8126</InlineCode> lorem ipsum
</Paragraph>
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>;
  }
});
https://static.datadoghq.com/static/images/logos/github_avatar.svg https://static.datadoghq.com/static/images/logos/vscode_avatar.svg jetbrains

Seamless integrations. Try Datadog Code Analysis

PREVIEWING: rtrieu/product-analytics-ui-changes