React native inline arrow function, with parameter. Confusing definition

Question

I have a series of react native TouchableHighlights, each with a key prop (they are generated from an iterator). I want to give each an onPress function that is aware of its key parameter.

I have read that class based arrow functions are generally best practice, so I tried this:

handlePress = (event) => {
    console.log(event.target.key)
}

<TouchableOpacity key={key} onPress={this.handlePress} />

No dice, event is null.

So then I tried:

handlePress = (key) => {
    console.log(key)
}

<TouchableOpacity key={key} onPress={() => this.handlePress(key)} />

This works

However, this also works:

handlePress(key) {
    console.log(key)
}

<TouchableOpacity key={key} onPress={() => this.handlePress(key)} />

I thought that either one, or the other would fail. Are these functionally identical, or is there some subtlety that I'm missing?

Vishal · Accepted Answer · 2019-05-18 00:06:20Z

2

There are basically two differences between normal functions and arrow functions in javascript.

binding
syntax

Binding

If you try to use this inside normal function, it will throw some error. e.g.:

class example {

    constructor() {
        super();
    }

    someFunc() {
        console.log(this.props);
    }

    someFunc();

}

This will fail.

To fix it, you should bind it manually in the constructor of the class like this:

class example {

    constructor() {
        super();
        this.someFunc = this.someFunc.bind(this);
    }

    someFunc() {
        console.log(this.props);
    }

    someFunc();

}

On the other hand, you don't need to bind arrow functions. It will get context by default. So, this code is perfectly valid:

class example {

    constructor() {
        super();
    }

    const someFunc = () => {
        console.log(this.props);
    }

    someFunc();

}

Related to your question:

If you also want event in any function (normal or arrow), you can do this:

Using arrow function:

handlePress = (event, key) => {
    console.log(event, key)
}

<TouchableOpacity key={key} onPress={event => this.handlePress(event, key)} />

Using normal function:

handlePress(event, key) {
    console.log(event, key)
}

<TouchableOpacity key={key} onPress={event => this.handlePress(event, key)} />

answered May 18, 2019 at 0:06

Vishal

6,42814 gold badges91 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alex Over a year ago

Hi, this is helpful, thank you, but I'm looking for the difference (if any) between the last two options in my question, and which is best practice.

Alex Over a year ago

Actually, I've looked through some old code I had, and onPress={this.handlePress}, and handlePress = event => { something with event.target } does seem to work on React.

Vishal Over a year ago

@Alex you have 3 code blocks in your question. If you don't want any parameters, Use first code block whenever possible. If you want to pass parameter, to function, use second code block, use third code block only when context is important.

Vishal Over a year ago

@Alex In short, first option is highly performant and best to use. second and third are equal in performance, but using arrow function approach whenever you can, will be a good idea, as you don't have to manually bind it and will match the code of most of the developers.

Collectives™ on Stack Overflow

React native inline arrow function, with parameter. Confusing definition

1 Answer 1

Binding

Related to your question:

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Binding

Related to your question:

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related