Render a comment in the html of a react component

Question

I am trying to render an html component that has a comment it so that the comment shows up in the DOM as comment.

I currently have

<head>
    <title>{props.pageTitle}</title>
</head>

But I would like to have

<head>
    <title>{props.pageTitle}</title>

    <!-- Some information here --> 

</head>

And I would like to avoid using the following:

dangerouslySetHtml
element.innerHTML = "...";
element.outerHTML = "...";

Possible duplicate of [How to render a HTML comment in React?](https://stackoverflow.com/questions/40015336/how-to-render-a-html-comment-in-react) — Andrew Li, Sep 07 '17 at 23:37

score 2 · Answer 1 · answered Nov 21 '17 at 21:19

Once the component mounted, you could retrieve the current DOM element and, then apply some DOM operations to place the HTML comment wherever you need. You can find below an example of a component wrapped by HTML comments.

componentDidMount() {       
    // Get current node
    let currentNode = ReactDOM.findDOMNode(this);
    // Get parent node
    let parentNode = currentNode.parentNode;
    // Create the comment to insert before
    let commentBefore = document.createComment("Begin Tag");
    parentNode.insertBefore(commentBefore, currentNode);
    // Create the comment to insert after
    let commentAfter = document.createComment("End Tag");
    parentNode.insertBefore(commentAfter, currentNode.nextSibling);
}

Note: this will not work with `ReactDOMServer.renderToStaticMarkup` — Ryan Wheale, Oct 20 '20 at 21:23

Render a comment in the html of a react component

1 Answers1