How to render a HTML comment in React?

Question

Currently the render method can only return a single element/component. See: here

In the discussion under that ticket some suggest to wrap multiple elements returned from a React component in a HTML comment so that the wrapping component is ignored by the browser, e.g.:

<A>     <B></B>     <Fragment>         <C></C>         <D></D>     </Fragment>     <E></E> </A> 

would render to:

<a>     <b></b>     <!--<fragment data-reactid="">-->         <c></c>         <d></d>     <!--</fragment>-->     <e></e> </a> 

But how to actually create a component that renders just HTML comment? In other words, how the render function of the 'fragment' component in the example above could look like?

Answer 1

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> 

Answer 2

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]-->   ` }}   /> }