7

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>
Learner
  • 2,303
  • 9
  • 46
  • 81

2 Answers2

8

I think dangerouslySetInnerHTML can work for you.

Example

<div dangerouslySetInnerHTML={{__html: "<!-- some comment -->"}} />
bennygenel
  • 23,896
  • 6
  • 65
  • 78
0

If your IDE is giving you code line syntax errors (not runtime) after entering:

{/* This is a comment */}

Run your code anyway and see if it works. If it does, your IDE is the problem.

I recently reported this problem to my IDE developer and they promptly released a new upgrade and the problem went away. (Not that they upgraded solely because of this but they squeezed the fix in nevertheless. Although ReactJS/JSX has been around for a while, it's still novel enough to slip by even the best of em).

user5224681
  • 21
  • 4