React JSX and Comments

Sharing is Caring

HTML-guys hate it when their comment code do not work in JSX.


It’s because JSX tries to render anything within HTML thinking as all the code is a part of DOM.

You can’t use HTML comments but you can use Javascript comments under one condition -and it’s using with {curly braces} while mixing html-

Here’s an example (FAIL)

and Here’s an example (SUCCESS)

Note that; This piece of code uses 2 variants of commenting: one of them uses with curly braces and other one doesn’t.

So whats the difference?

In JSX; before writing some html code in a render function, you can use:

But, once the HTML is implemented you need to put the “React-specific code” under {curly braces} to tell parser that it’s not part of the DOM but part of React code.

I know it is annoying but why would you care about commenting system in any platform, framework or library instead of other functionalities