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.

What is the context? Why do you need this and using what methods? — m_callens, Apr 14 '17 at 18:15
Not clear. There might be different approaches depending on what you actually want to achieve and why. — dfsq, Apr 14 '17 at 18:16
Might not be possible. The JS code inside the `
` is evaluated before the `
` is even constructed. — Derek 朕會功夫, Apr 14 '17 at 18:18
Is this what you are asking for? https://facebook.github.io/react/docs/react-dom-server.html#rendertostring — Raphael Rafatpanah, Apr 14 '17 at 18:40
Does this answer your question? [Convert a React.element to a JSX string](https://stackoverflow.com/questions/34114679/convert-a-react-element-to-a-jsx-string) — Heretic Monkey, Jun 13 '23 at 20:38

beniutek · Answer 1 · 2017-04-14T20:48:36.840

54

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

edited Apr 14 '17 at 20:48

answered Apr 14 '17 at 20:39

beniutek

1,672
15
32

3

Note: this gives you the HTML that will get put on the page as a string, not the jsx, but luckily that's exactly what I wanted. – Ryan Shillington Aug 15 '17 at 20:38
Thanks. I tried that but it adds a lot of unexpected things to it. This is what I get. – Adrian Bartholomew Feb 21 '19 at 14:29
It looks like its adding other tags. – Adrian Bartholomew Feb 21 '19 at 14:32
1

This is perfect. #renderToStaticMarkup() doesn't add extra attributes, but #renderToString() apparently does. – lwdthe1 Feb 05 '21 at 00:29

How to render (print) JSX as String?

1 Answers1

Linked