Video displayed in ReactJS component not updating

Question

I\'m new to ReactJS (0.13.1), and I\'ve created a component in my app to display HTML5 video.

It seems to work perfectly but only for the first selection. The vid

Answer 1

I had the same problem with making a playlist with videos.

So I separated the video player to another react component and that component received two props: contentId (video identify) & videoUrl (video URL).

Also I added a ref to the video tag so I can manage the tag.

var Video = React.createClass({
    componentWillReceiveProps (nextProps) {
        if (nextProps.contentId != this.props.contentId) {
            this.refs['videoPlayer'].firstChild.src = this.props.videoUrl;
            this.refs['videoPlayer'].load()
        }
    },
    propType: {
        contentId: React.PropTypes.string, // this is the id of the video so you can see if they equal, if not render the component with the new url 
        videoUrl: React.PropTypes.string, // the video url
    } ,
    getDefaultProps(){
        return {
        };
    },
    render() {
        return (
            
        );
    }
});

module.exports = Video;

this is much more clean: