Insert HTML comments in React

Question

Is there a way to insert an HTML comment node in React JSX, in the same way you might insert a component or DOM node?

E.g., something like:

React.createElement(Comment, {}, "comment text");

Would render to:

<!-- comment text -->

The idea is that the comment be visible on the page, so { /* this /* } doesn't answer my question.

Note that the following related question doesn't have an answer and asks for something somewhat different:

How to render a HTML comment in React?

I just want to render a single comment node. I notice that React infrastructure renders HTML comments on its own, so perhaps there is a (slightly hacky?) way to do it too.

I think it is not possible at the moment due to not being able to uniquely identify comment nodes in the dom. Best reference I could find: https://groups.google.com/forum/#!topic/reactjs/y7AGHSntR8I — Davin Tryon, Nov 02 '16 at 14:19
This particular answer answers your question https://stackoverflow.com/a/41131326/4373305 — Alex Zinkevych, Nov 20 '17 at 10:10
@АлексейЗинкевич Thanks! Does that solution have any weird side-effects that you know? — GregRos, Nov 20 '17 at 13:35

score 5 · Answer 1 · answered Jan 06 '17 at 01:22

Another alternative is to use dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{ __html: '<!-- comment text -->' }} />

dangerouslySetInnerHTML is React's replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it's dangerous.

https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml

Unfortunately this requires a wrapper (in this case: `div`) which may not be ok. React Fragment do not work either since they do not support the `dangerouslySetInnerHTML` attribute yet. — Iso, Apr 12 '18 at 10:36

score 4 · Answer 2 · answered Nov 02 '16 at 14:41

Only thing I could think of would be to manipulate the DOM on componentDidMount and add your comment there, but then React wouldn't be handling that DOM manipulation so it might cause some issues?

    var HTMLComment = React.createClass({

      componentDidMount: function(){
        var htmlComment = "<!--" + this.props.comment + "-->"; 
          this.span.innerHTML = htmlComment;
      },

      render: function(){
        return (
            <span ref={(span) => this.span = span} ></span>
        )
      }
    })

Unfortunately this does not work with `ReactDOMServer.renderToStaticMarkup` :( — Ryan Wheale, Oct 20 '20 at 19:15

score -1 · Answer 3 · answered Jun 23 '23 at 06:12

Yes, you can insert an HTML comment node in React JSX by using curly braces {} and JavaScript syntax. Here's an example:

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      {/* This is an HTML comment */}
      <p>Some content</p>
    </div>
  );
};

export default MyComponent;

In the code snippet above, the HTML comment This is an HTML comment is inserted using the curly braces and the JavaScript-style comment syntax ({/* ... */}). The comment will be rendered as a regular HTML comment in the resulting HTML markup.

Please note that HTML comments are generally used for developer notes or to temporarily remove or hide parts of the code. They are not meant to be used as a way to pass data or communicate with the application logic.

Insert HTML comments in React

3 Answers3

Linked