Categories
JavaScript Answers React Native Answers

How to bind onPress with an argument in React Native?

Spread the love

Sometimes, we want to bind onPress with an argument in React Native.

In this article, we’ll look at how to bind onPress with an argument in React Native.

How to bind onPress with an argument in React Native?

To bind onPress with an argument in React Native, we can create a function that returns the onPress handler function.

For instance, we write:

import * as React from 'react';
import { Button, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const onPress = (arg) => () => {
    console.log(arg);
  };

  return (
    <View>
      <Button title="button" onPress={onPress('hello')} />
    </View>
  );
}

to add a Button with the onPress prop set to the function that we get after we call onPress with 'hello'.

We define onPress to return a function that logs the arg that we passed into the outer function.

Therefore, when we press the button, we see 'hello' logged.

Conclusion

To bind onPress with an argument in React Native, we can create a function that returns the onPress handler function.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *