1

I'm new to React. I have an <iframe>. Before it is destroyed or removed I want to call some clean-up code. But I'm not sure how to call that method before destroy. Here is my code:

App.js

import React, { Component } from "react";

import "./App.css";

export default class App extends Component {
  lang = "de-DE";

  myMethod =()=> {
    var in_dom = document.body.contains("the_iframe");
    var observer = new MutationObserver(function(mutations) {
    if (document.body.contains("the_iframe")) {
      if (!in_dom) {
        console.log("element inserted");
      }
      in_dom = true;
      } else if (in_dom) {
       in_dom = false;
       console.log("element removed");
      }

    });
    observer.observe(document.body, {childList: true, subtree: true});
  }

  render() {
    ...
    return (
      <div className="App">
        <header className="App-header">
          <span className="App-link">
            Change Language
          </span>
          <span className="App-link">
            Logout
          </span>
        </header>
        <div>
          <iframe
            id="the_iframe"
            width="95%"
            height="200px"
            scrolling="no"
            beforeunload="myMethod()"
          ></iframe>
        </div>
      </div>
    );
  }
}

I took help from here: DOM event when element is removed

Some information I took from here also: DOMContentLoaded, load, beforeunload, unload

Tanzeel
  • 4,174
  • 13
  • 57
  • 110

1 Answers1

3

React Components have a componentWillUnmount() method that gets called when a component is being removed from the DOM.

Usage:

class App extends React.Component{
   componentWillUnmount(){
      //Put your Code in here
   }
}

Edit:

export default class App extends React.Component{
    render(){
        return(
            <div className="App">
                <header className="App-header">
                <span className="App-link">
                    Change Language
                </span>
                <span className="App-link">
                    Logout
                </span>
                </header>
                <IFrameComponent /> //Your iFrame Component
            </div>
        );
    }
}

class IFrameComponent extends React.Component{
    componentWillUnmount(){
        console.log("Component removed.");
    }

    render(){
        return(
            <div>
                <iframe
                    id="the_iframe"
                    width="95%"
                    height="200px"
                    scrolling="no"
                ></iframe>
            </div>
        );
    }
}
sbolel
  • 3,486
  • 28
  • 45
iNex
  • 60
  • 1
  • 7
  • It works for the whole component. I'm only interested in `iframe` – Tanzeel Feb 19 '21 at 10:24
  • the compoenent can have may other iframe or other elements but I'm interested in a particular elemet only – Tanzeel Feb 19 '21 at 10:26
  • If you have a component that could be it's own seperate component because it has it's own functionality and logic, you should create a new component for it and create an instance of it in your App Component. This is more or less one of the core principles of react. I edited my answer to give you a rough idea what i mean with that. I would advise you to take the tutorial at: https://reactjs.org/tutorial/tutorial.html It gives you a good idea about how react works and should be structured. – iNex Feb 19 '21 at 11:14