How to render (print) JSX as String?
Olivia Zamora
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.
41 Answer
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:
4