Passing values in onPress method of TouchableOpacity without using arrow functions or bind function can be achieved by using JSX props. Remember not to use arrow functions in JSX props

Question

Passing values in onPress method of TouchableOpacity without using arrow functions or bind function can be achieved by using JSX props. Remember not to use arrow functions in JSX props

I am working on a React Native project and I have a TouchableOpacity component in my view with an onPress method. I want to avoid using arrow functions and bind functions in the onPress method as it creates a new function every time. My goal is to pass parameters to the onPress method. Below is the code snippet:

<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 want to find a solution that does not involve using arrow functions in the onPress attribute, as it results in JSX props should not use arrow functions. Can anyone provide guidance on this issue and suggest possible solutions?

Any assistance would be greatly appreciated.

I have tried searching for solutions but have been unsuccessful so far.

typescript react-native jsx arrow-functions

Answer 1

Answer №1

To achieve the desired functionality, you will need to create a function that returns another function as shown below:

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

<TouchableHighlight
        activeOpacity={0.7}
        style={styles.touchOfferItem}
        onPress={this.gotoOfferDetail(item)}
        accessibilityLabel={`Test`}
        testID={'Test'}
        accessible={true}>
</TouchableHighlight>

Answer 2

To achieve the desired functionality, you will need to create a function that returns another function as shown below:

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

<TouchableHighlight
        activeOpacity={0.7}
        style={styles.touchOfferItem}
        onPress={this.gotoOfferDetail(item)}
        accessibilityLabel={`Test`}
        testID={'Test'}
        accessible={true}>
</TouchableHighlight>

Passing values in onPress method of TouchableOpacity without using arrow functions or bind function can be achieved by using JSX props. Remember not to use arrow functions in JSX props

Answer №1

Similar questions

What is the best approach to perform type checking on a function that yields varying types depending on the values of its

Utilizing the 'create' function in sqlite each time I need to run a query

What is the most efficient way to remove all typed characters from fields when clicking on a different radio button? The majority of my fields share the same ngModel on a separate page

Using Angular, you can effortlessly inject elements into the editable div from any location on the page

React hook call is not valid

Issue with importing RxJS in an Angular 5 project

Angular 2 Routing 3.0: Paying Attention to Letter Case

Tips for splitting JSON objects into individual arrays in React

Developing a Library for Managing APIs in TypeScript

Show an array of arrays using a visual table representation

Sending information to components in Angular using Router

Immediate update: Receiving a status of 400 "Bad request" when trying to make an HTTPPOST

Triggering multiple updates within a single method in Angular will cause the effect or computed function to only be triggered

What is the proper error type to use in the useRouteError() function in react-router-dom?

The validators in the FormControl are inconsistently functioning, showing up where they shouldn't and sometimes failing to work where

I need help with querying the date format in Mongoose and MongoDB. The specific date I am trying to query is stored in the field "ticketTimeStartDate" and is in the format: "Mon Oct 18 2021 12:28:59 GMT+0000 (

Using TypeScript to work with asynchronous child_process.exec operations

It appears that the express socket.io port 3000 is currently occupied

Error message: Material Design UI - The type 'string' cannot be assigned to the type Icon

Toggle the visibility of an input field based on a checkbox's onchange event