Velvet Star Monitor

Standout celebrity highlights with iconic style.

news

How to render (print) JSX as String?

Writer 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.

4

1 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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy