title: Changing currentTime using React Component State
body: <p>Heres a <a href="https://codesandbox.io/s/0vm011z0kv" rel="nofollow noreferrer">link to the sandbox</a>. I'm looking for the best way to manipulate a <code>&lt;video&gt;</code> element's currentTime. In my sandbox I've been able to do that by having a button call a function <code>seek()</code> which changes the state of <code>video</code>, a reference to <code>document.getElementById('video-player')</code>, see below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class VideoPlayer extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        source: props.source,
        timestamp: props.timestamp
      };
    }
  
    componentDidMount() {
      this.setState({ video: document.getElementById('video-player') })
    }
  
    componentDidUpdate(prevProps) {
      if (this.props !== prevProps) {
        this.setState(
          { timestamp: this.props.timestamp }, 
          () =&gt; { this.seek() }
        );
      }
    }
  
    seek = () =&gt; {
      console.log(this.state.timestamp)
      //works
      this.state.video.currentTime = 1;
      //doesn't work
      //this.state.video.currentTime = this.state.timestamp;
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;video 
            id='video-player'
            height='200px'
            src={this.state.source} 
            type='video/mp4'
            controls&gt;
          &lt;/video&gt;
          {/* I don't want this button. I want skip from the outside */}
          &lt;button onClick={this.seek}&gt;Skip Inside Component&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The thing I can't figure out is that I can only manage to change currentTime inside the component because for whatever reason, I can't assign <code>this.state.timestamp</code> to the currentTime of my <code>&lt;video&gt;</code> reference (<code>this.state.video.currentTime</code>). </p>
  
  <p>Ultimately the component should receive <code>props.timestamp</code>, provided by Redux, call <code>seek()</code> inside <code>&lt;VideoPlayer /&gt;</code> whenever Redux's state changes, and set the video's currentTime to <code>this.state.timestamp</code>.</p>
  
  <p>Let me know if you guys need any more details. Thanks in advance!</p>
  
  <p>EDIT: The above has been answered but I'm still having an issue. The sandbox I shared and just fixed still won't work in my <a href="https://github.com/gjaros/ow_coaching/tree/master/app/javascript/owc_post" rel="nofollow noreferrer">rails project</a> though. I had a feeling it wouldn't. When one of the three buttons in <code>App.js</code> is clicked, the state changes in Redux and is successfully received by <code>&lt;VideoPlayer&gt;</code>. This is confirmed by my console.log inside of <code>seek()</code> which returns the corresponding button's value to the console. However, the video's currentTime still doesn't change. Any ideas here?</p>