Convert a React.element to a JSX string

Question

I am trying to build a component which,

1. Takes children and
2. Renders the children in the DOM and also,
3. Shows the children DOM in a pre for documentation sake

One solution is to pass the JSX as a separate prop as well. This makes it repetitive since I am already able to access it through this.props.children. Ideally, I just need to somehow convert the children prop as a string so that I can render it in a pre to show that "this code produces this result".

This is what I have so far

class DocumentationSection extends React.Component{         render(){            return <div className="section">                      <h1 className="section__title">{heading || ""}</h1>                      <div className="section__body"> {this.props.children}</div>                     <pre className="section__src">                         //Change this to produce a JSX string from the elements                         {this.props.children}                     </pre>                 </div>;          }   } 

How can I get the a jsx string in the format '<Div className='myDiv'>...</Div> when I render DocumentationSection as

<DocumentationSection heading='Heading 1'>     <Div className='myDiv'>...</Div> </DocumentationSection> 

Thanks.

Edit:

I tried toString, it dint work, gave [object Object]

Answer 1

If you want the HTML representation of a React element you can use #renderToString or #renderToStaticMarkup.

ReactDomServer.renderToString(<div>p</div>); ReactDomServer.renderToStaticMarkup(<div>p</div>); 

will produce

<div data-reactid=".1" data-react-checksum="-1666119235">p</div> 

and

<div>p</div> 

respectively. You will however not be able to render the parent as a string from within itself. If you need the parent too then from where you render the parent pass a renderToString version of it as props to itself.

Answer 2

React.renderToString is depreciated as of React v0.14.0, it's recommended to use ReactDOMServer.renderToString instead.

e.g

import ReactDOMServer from 'react-dom/server' ... ReactDOMServer.renderToString(YourJSXElement())