☢️ HTML Comment in React

React won’t let you write an HTML comment in JSX. Everyone learns that the hard way and settles for a JavaScript comment instead. But what if you really wanted a real <!-- --> in the DOM? For learning purposes, it turns out you can.

---

👉 Continue reading on my blog: ☢️ HTML Comment in React

Comments

[undqurek]

What about this solution dirask.com/posts/React-create-HTML... ?
If you work with SSR, it is good to use solution that supports comments on server side. Using DOM under Node.js it is heavy, so easier is to return some simple equivalent.

[hopekim-aparavi]

this is pretty cool because we need to add comments to free icons to attribute credit to the original author

[All In Developer]

that will leak into the DOM instead of staying in my code

That was the point, I needed the comment to land in DOM. 🙂
This is useful when you need something like IE/MSO conditional comments

<!--[if condition]>
(HTML to use if condition is true)
<![endif]-->

[All In Developer]

🤔 what do you mean? What is <html /> ? Like HTML tag, or the HTML string?

When you are writing Email HTML templates, in the end you need a HTML output, and you need conditional comments to target specific email clients like Outlook, that why I need the comment to land in final HTML.

It's not for frontend applications 🤷‍♂️

[All In Developer]

It's practical, I assure you 😀 But it is not showed in this blog post. Soon will release a library that will add some light to this.

[All In Developer]

Hunting a solution for almost a year, for a greater scope. 🙂 Soon will release a library
Some context: stackoverflow.design/email/base/mso/

[All In Developer]

why use React for something that will be sent by Email

For better DX