[FIXED] How to pass value in onPress method of TouchableOpacity without arrow and without bind function - **JSX props should not use arrow functions**

Issue

I have a TouchableOpacity in my view in React Native project and that has onPress method. I dont want to use arrow function and bind function in onPress method, as this create a new function every time. I want to pass parameter in onPress method. Below is the code for the same -

<TouchableOpacity
        activeOpacity={0.9}
        style={styles.touchOfferItem}
        onPress={() => this.gotoOfferDetail(item)}
        accessibilityLabel={`Test`}
        testID={'Test'}
        accessible={false}>
</TouchableOpacity>

gotoOfferDetail (offerData:IOfferDetailItem) {
    console.log(offerData.title)
  }

I dont want to use onPress in arrow function as it give me JSX props should not use arrow functions. Could anyone assist us with this situation and offer any solutions?

Any help is really appreciated.

I have search multiple things but did not find any solution.

Solution

You need a function which returns another function like this:

gotoOfferDetail (offerData: IOfferDetailItem) {
    return () => console.log(offerData.title)
}

<TouchableOpacity
        activeOpacity={0.9}
        style={styles.touchOfferItem}
        onPress={this.gotoOfferDetail(item)}
        accessibilityLabel={`Test`}
        testID={'Test'}
        accessible={false}>
</TouchableOpacity>

Answered By - Kirill Novikov
Answer Checked By - - Gilberto Lyons (ReactFix Admin)