ReactJS JSX toString()

Question

I'm writing a documentation website based on React. I want to show the code that is necessary to use a given component from my framework. At the same time I would like to show the actual component running, like a side-by-side view.

Currently, I'm adding the component as a String for the reference implementation and the component as JSX for the running scenario. Something like this:

var ButtonDoc = React.createClass({
  render: function () {
    let buttonComponent = (
      <Button label="Add" />
    );

    let buttonCode = `<Button label="Add" />`;

    return (
      <div>
        {buttonComponent}
        <pre><code>{buttonCode}</code></pre>
      </div>
    );
  }
});

Question: Is there a way that I can get the string representation of the given React component without the need to replicate the code?

I'm expecting something like this:

var ButtonDoc = React.createClass({
  render: function () {
    let buttonComponent = (
      <Button label="Add" />
    );

    let buttonCode = `${buttonComponent}`;

    return (
      <div>
        {buttonComponent}
        <pre><code>{buttonCode}</code></pre>
      </div>
    );
  }
});

The output of the given code is object [object] .

Answer 1

As I did not find anything that solved my problem, I ended up creating a npm repository to achieve this task.

https://github.com/alansouzati/jsx-to-string

Usage:

import React from 'react';
import jsxToString from 'jsx-to-string';

let Basic = React.createClass({
  render() {
    return (
      <div />
    );
  }
}); //this is your react component

console.log(jsxToString(<Basic test1="test" />)); //outputs: <Basic test1="test" />