Sinan Samet Sinan Samet - 1 year ago 70
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:


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

This does:

onProgress={() => {this.state.restart ? : 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={} />

Event a
is not fired inside

Answer Source


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


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).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download