0

I have a component that's loaded async via an import handling a click event in a parent component. The parent component listens for a click on a dom element and launches its this.handleMovieClick(event, 'movie name') handler.

The parent passes a closeVideo prop to the async loaded child component. In the child component it listens for a click to close the itself or when the video is finished playing. It calls its this.handleVideoEnd(), which then calls this.props.closeVideo.

The this.props.closeVideo goes into the Parent component and calls the parent's this.handleCloseVideo().

My question is how do I remove the async loaded component when it's no longer needed? Right now it is sitting in the DOM. Is there a way of forcing a component to be removed? Is there a way to call componentWillUnmount using asyc?

Or is loading component async just useful for code-splitting - load the code that's needed on demand? It's not meant for removing the component from the Parent? But then how does React Router do this?

the Parent Component:

ParentComponent extends Component {

constructor(props) {
 // bind event handlers

// used to hold a reference to the child async loaded component this.state = { AnimatedFullScreenMovie: null, animatedFullScreenMoviePath: null };

  }


handleCloseVideo() {
    this.setState({
      AnimatedFullScreenMovie: null,
      animatedFullScreenMoviePath: null
    })
  }

}

// handles loading the component async, sets the path to movie based on what clicked
handleViewMovieClick(event, name) {
    event.preventDefault();
    if (this.state.AnimatedFullScreenMovie === null) {
      import('./../../../reusable/AnimatedFullScreenMovie').then(component => 
     {
       if (name === 'movie1') {
          this.setState({
              AnimatedFullScreenMovie: component,
              animatedFullScreenMoviePath: "movie1.mp4"
            });
       } else {
          this.setState({
              AnimatedFullScreenMovie: component,
              animatedFullScreenMoviePath: "movie2.mp4"
            });
       }
     }
  }

In the render() of the Parent Component:

  render() {
// if the this.state.AnimatedFullScreenMovie has a component, render it
const showProfileVideo = () => {
      if (typeof this.state.AnimatedFullScreenMovie !== undefined && this.state.AnimatedFullScreenMovie !== null) {
        const AnimatedFullScreenMovie = this.state.AnimatedFullScreenMovie.default;
        return (<AnimatedFullScreenMovie
          videoSrc={this.state.animatedFullScreenMoviePath}
          closeVideo={this.handleCloseVideo} // <-- pass the handleCloseVideo() as a prop to the async loaded child
        />);
      } else {
        return null;
      }
    }

return(
   <section className="video-slider">
    { showProfileVideo() }
<div>
  <p><a href="#" onClick={() => this.handleViewMovieClick(event, 'movie1')}>Watch the film</a></p>
</div>

<div>    
  <p><a href="#" onClick={() => this.handleViewMovieClick(event, 'movie2')}>Watch the film</a></p>
 </div>
);

}

Here is the child Async Component:

export default class AnimatedFullScreenMovie extends Component {

  constructor(props) {
    super(props);

    this.videoContainer, this.video;
    this.playVideo = this.playVideo.bind(this);
    this.handleVideoEnd = this.handleVideoEnd.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  componentDidMount() {
    this.video.addEventListener('ended', this.handleVideoEnd);
  }

  playVideo() {
    this.video.play();
  }

  handleVideoEnd() {
    this.video.pause();
    this.props.closeVideo; // <- launch the event handler in the parent to close the video by setting this.state.AnimatedFullScreenMovie to null
  }

  handleClose() {
    this.handleVideoEnd()
  }

  componentWillUnmount() {
    this.video.removeEventListener('ended', this.handleVideoEnd);
  }

  render() {
    return (
      <div id="animated-fullscreen-video-wrapper" ref={videoContainer => this.videoContainer = videoContainer}>
        <h2 onClick={this.handleClose}>Close</h2>
        <video src={this.props.videoSrc} ref={video => this.video = video} />
      </div>
    );
  }

}
1

1 Answer 1

0

I was not calling the function properly with this.props.closeVideo. The proper way is this.props.closeVideo() in the async child component:

export default class AnimatedFullScreenMovie extends Component {

  // previous code

  handleVideoEnd() {
    this.video.pause();
    this.props.closeVideo(); // <- need to have the '()' chars in order to call
  }

 // remainder code


}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.