How to pass DOM via prop?

Question

React

I am writing a video player.

<div id="media-player" className="small-12 small-centered large-centered">
        <video id="media-video"
                       width="100%"
                       src=""
                       controls
                       ref={(player) => this.mediaPlayer = player}>
       </video>
       <PlayerControls/>
</div>

there is the video player component itself ( <video/>) and the controls component (ProgressBar, Play/Pause...). So, all the actions inside the controls I need to carry out inside the controls themselves, but they will act on the DOM element <video/>. Is it possible to somehow pass this component inside, like for example <PlayerControls player={this.mediaPlayer}/>? Tried in Component Lyfecycle methods, but there it is not rendered yet and therefore Null. And on DidMount, my controls are already rendered.
Yes, it would be possible to do getElementById inside the controls, but you yourself understand that doing this in each of the components (they will most likely be divided into subcomponents) is not very good, you will have to do the query several times.
Thank you.

Answer 1

Wouldn't it be easier to make a common parent for video and controls?

<mediaPlayer>
  <video ref={(v) => this.video = v} />
  <playerControls onStop={...} onPlay={...} onPause={...} />
</mediaPlayer>

Then the controls will be able to communicate with the player through a common parent.

Answer 2

Sorry, I don't seem to understand the problem correctly.