I have a main component, `App`, which has two child components, `Player`, and `VideoList`, where `Player` is a wrapper around [`react-player`](https://github.com/CookPete/react-player), heavily based off of the `react-player` demo.

`Player` has a method `renderLoadButton()` which creates a button that loads a particular video when clicked. I would like to have several of these buttons inside of my `VideoList` component.

I am attempting to pass the `renderLoadButton()` function up into the parent component, and then down into the `VideoList` component where I can call it.

Here is the code for `render()` function of the parent component. Both my `<Player/>` and `<VideoList/>` components instantiated here.

I get the following error on the line mentioned in the comment.

> 
> TypeError: Cannot read property 'renderLoadButton' of undefined
> 
> 
> 

```
render() {
    const dragHandlers = {onStart: this.onStart, onStop: this.onStop};
    const {deltaPosition, controlledPosition} = this.state;

    return (
      <div className="App">
          <div className="fullscreen">

              <Draggable handle="strong" bounds={'body'}{...dragHandlers}>
                  <div style={{position: 'absolute', bottom: '30%', right: '50%'}} className="video-box no-cursor">
                      <Player ref={instance=>{this.player = instance}} title="VIDEO" url='https://streamable.com/nfec3'/>
                  </div>
              </Draggable>
              <Draggable handle="strong" bounds={'body'}{...dragHandlers}>

               <div>
                   {/*Error on the following line*/}
                   <VideoList callback = {(x,y)=> this.player.renderLoadButton(x,y)}/>
               </div>
              </Draggable>
          </div>

          <div className="App-footer">
              <img src={vinyl} className="App-logo" alt="logo" />
              <h1>Radio</h1>
          </div>
      </div>
    );
}

```