title: React.Js and Video.js integration
body: <p>Following below article i am trying to show the videos in my react application.</p>
  
  <p><a href="https://docs.videojs.com/tutorial-react.html" rel="nofollow noreferrer">reactjsvideojs</a>
  But videos are not getting updated when i render video component dynamically.</p>
  
  <pre><code>RenderVideo(path){
  const videoJsOptions = {
  autoplay: true,
  controls: true,
  sources: [{
  src: path,
  type: 'video/mp4'
  }]
  }
  
  return &lt;VideoPlayer { ...videoJsOptions } /&gt;
  }
  </code></pre>
  
  <p>Calling when i click on the video thumbnails.</p>
  
  <pre><code> {props.imgs[index].mediaType === 'VIDEO' &amp;&amp; (
        &lt;div className={styles.videoContainer}&gt; 
               {RenderVideo(props.imgs[index].primaryLink)}
        &lt;/div&gt;
      )}
  </code></pre>
  
  <p>VideoJsplayer component</p>
  
  <pre><code>class VideoJsPlayer extends React.Component {
    componentDidMount() {
      const { onReady, ...options } = this.props;
      this.player = videojs(this.videoNode, options, onReady);
    }
  
    componentWillUnmount() {
      if (this.player) {
        this.player.dispose();
      }
    }
  
    render() {
      /* eslint-disable jsx-a11y/media-has-caption */
      return (
        &lt;div data-vjs-player&gt;
          &lt;video
            ref={node =&gt; (this.videoNode = node)}
            className="video-js vjs-big-play-centered"
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  VideoJsPlayer.propTypes = {
    onReady: PropTypes.func,
  };
  
  VideoJsPlayer.defaultProps = {
    onReady: noop,
  };
  
  export default VideoJsPlayer
  </code></pre>
  
  <p>Can someone please help me why the videos are not getting updated dynamically.</p>
  
  <p>Here are the things i observed 
  1) Second when i rendervideo it's not hitting componentdidmount.</p>