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

  • REACT_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

import React from 'react';

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

Compliant Code Example

import React from 'react';

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.