rspec/rules/S6438/javascript/rule.adoc

== Why is this an issue?

JSX lets you write HTML-like markup inside a JavaScript file, commonly used in React.

Adding comments inside JSX might be tricky as JSX code is neither a plain HTML nor JavaScript. 

HTML comments (``++<!-- comment here -->++``) are not valid syntax in JSX.

JavaScript-style comments, single or multiline, will create an additional text node in the browser, which is probably not expected. 

[source,javascript]
----
<div>
  // Noncompliant: text inside node
</div>
----

To avoid that, use JavaScript multiline comments enclosed in curly braces. Single-line comments can also be used, but avoid having the ending bracket in the same line.

[source,javascript]
----
<div>
  {
    /*
      multi-line
      comment
    */
  }
  {
    // single-line comment
  }
  { /* short form comment */ }
</div>
----

Note that JavaScript comments around attributes are also allowed (`<div /* comment */>`).

If the additional text node is intentional, prefer using a JavaScript string literal containing that comment.

[source,javascript]
----
<div>
  { '// text inside node' }
</div>
----

== Resources
=== Documentation

* React Documentation - https://react.dev/learn/javascript-in-jsx-with-curly-braces[JavaScript in JSX with Curly Braces]