How to display (print) JSX as String?

Question

Here JSX is a sample scode:

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 a 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 have React components that I create on the server. I want to get them as strings in order to convert them to another client-side template library.

Answer 1

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

like that:

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

Here are some more documents about this:

https://facebook.imtqy.com/react/docs/react-dom-server.html#rendertostaticmarkup