creating ref within react context provider

Viewed 2374

I am having a hard time setting a ref within a context provider. Is this not possible or is there something I am missing? I am able to createRefs in other components the same way but the following always shows the ref as { current: null }

const VideoPlayerContext = React.createContext();

export default class VideoPlayerProvider extends Component {

  videoPlayerComponent = React.createRef()

  state = {
    // some state
  }

  seek = (time) => {
    this.videoPlayerComponent.seek(time)
  }

  render () {
    return (
      <VideoPlayerContext.Provider value={Object.assign({}, this.state, { seek: seek})}>
        <VideoPlayer 
          key={'videoplayer'} 
          {...this.state}
          ref={this.videoPlayerComponent}
        />
        { this.props.children }
      </VideoPlayerContext.Provider>
    )
  }
}

and then my app is wrapped with that as such

const app = () => (
  <VideoPlayerProvider>
    <App />
  </VideoPlayerProvider>
)  

Any help appreciated!

0 Answers
Related