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.
<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.
<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.
<div>
{ '// text inside node' }
</div>
