How to render a HTML comment in React?

This is what I have ended up with in one of my recent projects:

import React, {Component, PropTypes} from 'react';import ReactDOM from 'react-dom';class ReactComment extends Component {    static propTypes = {        text: PropTypes.string,        trim: PropTypes.bool    };    static defaultProps = {        trim: true    };    componentDidMount() {        let el = ReactDOM.findDOMNode(this);        ReactDOM.unmountComponentAtNode(el);        el.outerHTML = this.createComment();    }    createComment() {        let text = this.props.text;        if (this.props.trim) {            text = text.trim();        }        return `<!-- ${text} -->`;    }    render() {        return <div />;    }}export default ReactComment;

So you can use it like this:

<A>    <B></B>    <ReactComment text="<fragment>" />        <C></C>        <D></D>     <ReactComment text="</fragment>" />    <E></E></A>

Here's another novel approach if you need this to work with SSR.

Here's a MaxWidth component I am using with my react-based email tool called Myza.

import ReactDOMServer from 'react-dom/server'export const MaxWidth = ({ maxWidth = 0, className, children }: IMaxWidthProps) => {  const renderedChildren = ReactDOMServer.renderToStaticMarkup(    <div className={className} style={{ maxWidth: `${maxWidth}px`, margin: '0 auto' }}>      {children}    </div>  )  return <div dangerouslySetInnerHTML={{    __html: `    <!--[if mso]><center><table><tr><td width="${maxWidth}"><![endif]-->    ${renderedChildren}    <!--[if mso]> </td></tr></table></center><![endif]-->  ` }}  />}

You can do it with the following component, it is simple and functional but it has the drawback of having to wrap your comment in a HTML node i.e.a "div" because it makes use of the dangerouslySetInnerHTML attribute:

    const ReactComment = ({ text }) => {  return <div dangerouslySetInnerHTML={{ __html: `<!-- ${text} -->` }}/>}

Then, you use it like so:

<ReactComment text={'My beautiful HTML comment'}/>