'Handle different onPress functions TypeScript

I am developing a mobile app using React Native with Expo CLI and TypeScript.

I have a screen in my app that contains two cards and two buttons inside those cards. To develop the cards, I did a reusable component so that I don't repeat code.

The code for this reusable component is this:

export function AccountCards(props: any = {}) {
  const { header, content, text, style, handler } = props;
  return (
    <Card
      mode="elevated"
      elevation={5}
      style={[styles.cardPoints, styles.cards, style]}
    >
      <Card.Content>
        <Title style={styles.cardTitle}>{header}</Title>
        <Paragraph style={styles.cardText}>{content}</Paragraph>
      </Card.Content>
      <Card.Actions>
        <Button
          mode="contained"
          style={styles.cardBtn}
          onPress={handler}
          labelStyle={{ color: colors.buttonTextColor }}
        >
          {text}
        </Button>
      </Card.Actions>
    </Card>
  );
}

This component is used in a screen then. The code is:

export function AccountScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Olá, Utilizador</Text>
      <AccountCards
        header={strings.screens.accountScreen.cardPoints.title}
        content={strings.screens.accountScreen.cardPoints.content}
        text={strings.screens.accountScreen.cardPoints.pointsButton}
        style={{
          marginBottom: 30,
        }}
        handler={PointsScreen}
      />
      <AccountCards
        header={strings.screens.accountScreen.cardHistory.title}
        content={strings.screens.accountScreen.cardHistory.content}
        text={strings.screens.accountScreen.cardHistory.historyButton}
      />
      <Button mode="contained" style={styles.editBtn}>
        {strings.screens.accountScreen.editProfileButton}
      </Button>
    </View>
  );
}

This code doesn't seems to work, I guess I didn't pass the onPress prop correctly.

I also tried to pass it as an arrow function but it doesn't work either.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source