Sinan Samet Sinan Samet - 7 days ago 6
React JSX Question

Calling a function inside an arrow function isn't working

I am trying to call a function inside an arrow function but somehow it doesn't work. What am I doing wrong?

This doesn't work:

restartVideo(ref){
ref.player.seek(0)
}

onProgress={() => {this.state.restart ? this.restartVideo : null}}


This does:

onProgress={() => {this.state.restart ? ref.player.seek(0) : null}}


Whole component:

<Video source={video} // Can be a URL or a local file.
ref={ref => this.player = ref} // Store reference
rate={1.0} // 0 is paused, 1 is normal.
paused={this.state.paused} // Pauses playback entirely.
onLoadStart={this.loadStart} // Callback when video starts to load
onProgress={() => {this.state.restart ? this.restartVideo : null}} // Callback every ~250ms with currentTime
onEnd={this.backToQuestion} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
style={styles.video} />


Event a
console.log()
is not fired inside
restartVideo()

Answer

Change

onProgress={() => {this.state.restart ? this.restartVideo : null}}

to

onProgress={() => {this.state.restart ? this.restartVideo() : null}}

i.e. assign a function that calls this.restartVideo, rather than one that returns it.

By the way, it looks as though you should also be passing ref (or accessing it via this in the function).