cannot read property "getChild" of undefined

Question

I am working on a react application. I am trying to call a function from my render function. The function I am calling uses getChild method. I am getting an error saying "cannot read property "getChild" of undefined". It works fine if I dont call it from render method.

This is the function and how I am calling it

handlePlay() {
    //this.props.playButtonClickedActio
    console.log("handle play ")
    console.log("hii" + player.getChild('ControlBar').getChild('ProgressControl').currentWidth())
}

render() {
    if (this.props.sentance_selected_reducer.flag) {
        this.handlePlay();
    }

player is defined like this in componentDidMount

this.video = player = videojs(this.video_el, options).ready(function () {
    self.player = this;
    self.player.on('play', that.handlePlay);
});

Answer 1

You're not supposed to do things from the render function. It's purpose is to render content based on some data.

The reason it returns undefined is that you are within the render method, so basically nothing is rendered yet. The player does not exist until the render function finishes.

Instead, you should handle stuff like this in the componentDidMount method, which is called after every render finishes.

componentDidMount() {
    if (this.props.sentance_selected_reducer.flag) {
        this.handlePlay();
    }
}