JSX is a special JavaScript syntax allowing to easily write HTML together with JavaScript when using React framework. Adding comments inside JSX
might be tricky as JSX code is neither a plain HTML nor JavaScript. It’s not allowed to use HTML comment syntax (<!-- … -->
), it
will make the parsing fail. And using JavaScript style comments, single or multiline, will create an additional text node in the browser, which is
probably not expected. To avoid that use JavaScript multiline comments enclosed in the curly braces. Note that JavaScript comments are also allowed
next to the attributes (<div /* comment */>
).
However if the additional text node is intentional, prefer using a JavaScript string literal containing that comment.
Noncompliant Code Example
<div>
// nothing here
</div>
Compliant Solution
<div>
{ /* nothing here */ }
</div>
When text node is intentional:
<div>
{ '// nothing here' }
</div>