The content of a JSX text node should not be in the form of JavaScript comment

  • JSX_BAD_COMMENT
  • Error
  • Medium
  • react

This rule detects JSX text node whose content is in the form of JavaScript comment.

If you intended a JavaScript comment in JSX, you need to enclose the comment with braces to prevent it from showing in browsers.

If you really intended a text, it is better to enclose the text with quotes and braces to make it explicit that it is not a comment.

Noncompliant Code Example

View with compliant examples side by side
import React from 'react';

export class Hello extends React.Component {
  render() {
    return (
      <div>
        /* This is a comment */ {/* JSX_BAD_COMMENT alarm because this text is recognized as a JSX child instead of a comment. */}
        <div>// is a double slash.</div> {/* JSX_BAD_COMMENT alarm because this text in div element is recognized as a JSX child instead of a comment. */}
      </div>
    );
  }
}

Compliant Code Example

View with noncompliant examples side by side
import React from 'react';

export class Hello extends React.Component {
  render() {
    return (
      <div>
        {/* This is a comment */}
        <div>{"// is a double slash."}</div>
      </div>
    );
  }
}

Version

This rule was introduced in DeepScan 1.3.0-beta.

Was this documentation helpful?