How to render (print) JSX as String?

Question

Here JSX is scode sample:

export default class Element extends React.Component {   render() {     return (       <div>         <div className="alert alert-success">           {this.props.langs.map((lang, i) => <span key={i} className="label label-default">{lang}</span>)}         </div>       </div>     )   } } 

How to get string like this?

<div><div className="alert alert-success">{this.props.langs.map((lang, i) => <span key={i} className="label label-default">{lang}</span>)}</div></div> 

UPD: I got React components which I render on the server. I want to get them as a strings to transform them for another templating library on client side.

Answer 1

just call renderToStaticMarkup() and you should get the static html markup language generated by React.

somewhat like this:

import ReactDOMServer from 'react-dom/server'; import Element from './path/to/element/class';  const element = <Element />;  ReactDOMServer.renderToStaticMarkup(element) 

here are some more docs about this:

https://facebook.github.io/react/docs/react-dom-server.html#rendertostaticmarkup