reactjs jsx ajax,javascript - ReactJS JSX toString() - Stack Overflow

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 = (

);

let buttonCode = ``;

return (

{buttonComponent}

{buttonCode}

);

}

});

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 = (

);

let buttonCode = `${buttonComponent}`;

return (

{buttonComponent}

{buttonCode}

);

}

});

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