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 have described some approaches for plain JavaScript here. Based on that I have found solutions for React which work for me:

• using src attribute on video itself:

  var Video = React.createComponent({
    render() {
      return 

  Dana's answer is a great option extending this solution.

• using .load() call on video element:

  var Video = React.createComponent({
    componentDidUpdate(_prevProps, _prevState) {
      React.findDOMNode(this.refs.video).load(); // you can add logic to check if sources have been changed
    },
  
    render() {
      return (
        
      );
    }
  });
  

UPD:

• of course it's possible to add unique key attribute for tag (for example based on your sources), so when sources will change it will be changed as well. But it will cause to be re-rendered completely and it may cause some UI flashes.

  var Video = React.createComponent({
    render() {
      return (
        
      );
    }
  });