How to add visible HTML comment in JSX?

Question

I am using ReactJS and I have a requirement to add visible HTML comment (in html source) in JSX but I am not sure how to do that.

This comment is needed by a third party vendor to do some processing on the html between the comments.

<!-- trans_disable_start -->
<div> testing </div>
<!-- trans_disable_end-->

I tried the below options but the comment is not visible in html source.

{/* <!-- trans_disable_start -->*/}

Tried using this library - react-render-html

{renderHTML('<!-- trans_disable_start -->')}

Any ideas / thoughts is appreciated.

Update 1:

I tried to use the below JS library but that doesnt work since I am using the server side rendering and I see the below value in page source on initial load (Rather than comment)

https://github.com/optimalisatie/react-jsx-html-comments

<react-comment data-reactid="18">trans_disable_start</react-comment>

Tried without curly braces but got the parse error. Errr: Unexpected token — Learner, Oct 24 '17 at 17:24
Possible duplicate of [How to render a HTML comment in React?](https://stackoverflow.com/questions/40015336/how-to-render-a-html-comment-in-react) — bennygenel, Oct 24 '17 at 17:28
Also [this](https://github.com/optimalisatie/react-jsx-html-comments) might help too — bennygenel, Oct 24 '17 at 17:31

score 7 · Answer 1 · answered Oct 24 '17 at 17:20

7

I think dangerouslySetInnerHTML can work for you.

Example

<div dangerouslySetInnerHTML={{__html: "<!-- some comment -->"}} />

answered Oct 24 '17 at 17:20

bennygenel

22,268
6
60
76

How to add visible HTML comment in JSX?

1 Answers1