51 lines
1.2 KiB
Plaintext
51 lines
1.2 KiB
Plaintext
== 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]
|