title: Handle iframe in React with refs
body: <p>I am trying to set the content of an iframe in a React component. I have a component in which contains a <code>handleStatementPrint</code> function which has to be called when the iframe finishes loading. That function must print loaded iframe content - pdf file accessed with url <code>this.props.pdfs.url</code> . Already iframe content is loaded and i can see pdf file in iframe, but i need to pass iframe content with refs but don't know how to do that correctly. I know that i need to use <code>componentDidMount</code>, but don't know that to write in here.</p>
  
  <p><strong><em>Component witch must have iframe content</em></strong>: </p>
  
  <pre><code>import React, { Component } from 'react'
  
  import IframeComponent from './components/Iframe';
  
  class MainComponent extends Component {
  
    handleStatementPrint = () =&gt; {
      const iframePdf = this.iframePdf.contentWindow;
      if (this.iframePdf !== undefined) {
         const iframePdf = this.iframePdf.contentWindow;
         iframePdf.print();
      }
    }
  
    render () {
      return (
        &lt;div className="container"&gt;
  
          {
            this.props.pdfs &amp;&amp;
              &lt;iframe
                ref={(frame) =&gt; { this.iframePdf = frame }}
                src={this.props.pdfs.url}
                title="iFramePdf"
                type="application/pdf"
                &gt;
              &lt;/iframe&gt;
          }
  
        &lt;/div&gt;
      );
    }
  };
  
  export default Statement;
  </code></pre>
  
  <p><strong><em>Iframe component</em></strong>: </p>
  
  <pre><code>import React, { Component } from 'react'
  
  class IframeComponent extends Component {
  
    componentDidMount() {
      // Load iframe content 
    }
  
    render () {
      return (
        &lt;div&gt;
  
           &lt;Iframe /&gt;
  
        &lt;/div&gt;
      );
    }
  };
  
  export default Iframe;
  </code></pre>
  
  <p>I'm tried this examples: </p>
  
  <p><a href="https://gist.github.com/iest/3b571a6ddcdd9ddab3cf" rel="nofollow noreferrer">Basic react iframe with onLoad handler</a></p>
  
  <p><a href="https://medium.com/@ebakhtarov/handling-of-iframes-in-react-f038be46ac24" rel="nofollow noreferrer">Handling of iframes in React</a></p>
  
  <p>Iframe content is coming from fetch API, but i can access iframe and can see that content is perfectly loaded using ref. Problem: need to load that content in <code>componentDidMount</code> method before calling <code>handleStatementPrint</code> function from another component wich can print loaded iframe content. </p>
  
  <p>Questions:</p>
  
  <ol>
  <li><p>So how to pass correctly iframe content with refs to load content in componentDidMountmethod? </p></li>
  <li><p>How to pass loaded content from <code>componentDidMount</code> method in <em>MainComponent</em> functions, to do actions with loaded content?</p></li>
  </ol>