Handle iframe in React with refs

Question

I am trying to set the content of an iframe in a React component. I have a component in which contains a handleStatementPrint function which has to be called when the iframe finishes loading. That function must print loaded iframe content - pdf file accessed with url this.props.pdfs.url . 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 componentDidMount, but don't know that to write in here.

Component witch must have iframe content:

import React, { Component } from 'react'

import IframeComponent from './components/Iframe';

class MainComponent extends Component {

  handleStatementPrint = () => {
    const iframePdf = this.iframePdf.contentWindow;
    if (this.iframePdf !== undefined) {
       const iframePdf = this.iframePdf.contentWindow;
       iframePdf.print();
    }
  }

  render () {
    return (
      <div className="container">

        {
          this.props.pdfs &&
            <iframe
              ref={(frame) => { this.iframePdf = frame }}
              src={this.props.pdfs.url}
              title="iFramePdf"
              type="application/pdf"
              >
            </iframe>
        }

      </div>
    );
  }
};

export default Statement;

Iframe component:

import React, { Component } from 'react'

class IframeComponent extends Component {

  componentDidMount() {
    // Load iframe content 
  }

  render () {
    return (
      <div>

         <Iframe />

      </div>
    );
  }
};

export default Iframe;

I'm tried this examples:

Basic react iframe with onLoad handler

Handling of iframes in React

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 componentDidMount method before calling handleStatementPrint function from another component wich can print loaded iframe content.

Questions:

1. So how to pass correctly iframe content with refs to load content in componentDidMountmethod?

2. How to pass loaded content from componentDidMount method in MainComponent functions, to do actions with loaded content?

Solution

This is how refs works:

<MyComponent ref={(c) => { this.myComponent = c; }} />

After component is MOUNTED you gain access to the component itself and its method:

this.myComponent.myMethod();

Comments

[User Paulius]

I tried this, but how to load iframe content in componentDidMount method, and then in another component handleStatementPrint function access iframe content and do actions with it?

[Mosè Raguzzini]

Iframe content comes from the same origin ? If it isn't you can't access to the iFrame content directly. developer.mozilla.org/en-US/docs/Web/Security/…

[User Paulius]

Iframe content's src url is coming from fetch API, but i can access iframe and can see that content(pdf URL) is perfectly loaded using ref. Problem: need to load that content in componentDidMount method before calling handleStatementPrint function from another component wich can print loaded iframe content.

[Mosè Raguzzini]

load content in componentDidMount isn't a issue, i suppose. You can store loaded content in a class variable or, if it's serializable, directly in the state.