Philipp Philipp - 3 months ago 11
Javascript Question

Convert react JSX object to HTML

I have a react application that generates HTML output based on some configuration. Like this:

export const getHtml = (config) => {
const {classes, children} = config
return (<div className={classes.join(' ')}>{children}</div>);
}


Inside the react app I can easily display the resulting DOM objects, but I want to save the HTML code to DB, to display it on a different page (without loading react/parsing the config again)

I could not find a way to convert the JSX object to plain HTML...

Answer

Use renderToStaticMarkup method - it produces HTML strings that we can transfer to the wire quickly:

const htmlString = ReactDOMServer.renderToStaticMarkup(
      <div ...
);