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

Question

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.

Answer 1

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>