How to get a React component's innerHTML

Question

I have a react component and I want its innerHTML to pass as prop to an iframe.

render() {
        const page = 
        const iframeConte         


        

Answer 1

You can use refs or ReactDOM.findDOMNode to get innerHTML but the component should be mounted.

class App extends React.Component{

  componentDidMount(){
    console.log(this.ref.innerHTML)
    console.log(ReactDOM.findDOMNode(this).innerHTML)
  }
  render(){
    return (
      <div ref={r=>this.ref = r}>app</div>
    )
  }
}

ReactDOM.render(
  <App />,document.getElementById("app")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

Maybe a bit late for a reply, but you may try reaching the react children elements through ref:

const r = React.useRef(null);
console.log(r.current.children)