title: How can I set the state of a component on video end in react?
body: <p>In my component I have an <code>componentDidUpdate</code> function where I play a video and on that video I set the <code>video.onended</code> event as noted <a href="http://www.w3schools.com/tags/av_event_ended.asp" rel="nofollow">HERE</a></p>
  
  <p>Currently my code looks like this: </p>
  
  <pre><code>  componentDidUpdate: function() {
      if(this.state.showVideo){
        this.refs.homeVideo.play();
        // Triggering event on video end
        let homeVideo = document.getElementById("homeVideo");
        homeVideo.onended = function(){
          console.log(this.state);
          this.setState({ showVideo: !this.state.showVideo });
        }
      }
    }
  </code></pre>
  
  <p>My issue right now is that this.state is undefined in the onended function and so is setState, which is preventing me from updating the state of the component in react so that I can close the video player when it ends. </p>
  
  <p>What is the appropriate react way of handling this?</p>