React Native component callback functions

Question

In components, I've seen different way of doing callbacks. What is the difference between:

<MyButton onPress={ () => {doSomething(data)} }>

and

<MyButton onPress={ this.doSomething.bind(this) }>

Answer 1

<MyButton onPress={ () => {doSomething(data)} }>

This code block uses the ES6 Arrow function; which is another way of declaring a function in javascript. Also, the scope of this in arrow function depend where the function was created as opposed to normal scoping rule of this which by default depends on how the function was called.

<MyButton onPress={ this.doSomething.bind(this) }>

This statement makes a call to doSomething method. But since the event registration is done on different element, the Scope of doSomething is different and is forcefully binded by using bind method in javascript.

Also, in the second method you are not passing the data parameter, which you can pass using the second argument to the method like shown below.

<MyButton onPress={ this.doSomething.bind(this, data)} }>