Currently, I am grappling with an issue in my Typescript and React Native project. The error message displayed on the console reads: "This expression is not callable. Type 'Boolean' has no call signatures." My code consists of a simple home page with two cards, each meant to navigate the user to another page upon clicking. To achieve this functionality, I decided to experiment with the useState hook for better comprehension. Below is the snippet from home.tsx:
import { Button, StyleSheet, Text, View } from "react-native"
import CardsComponent from "../../components/cards/cards"
import EcoNoticias from "../../components/EcoNoticias/EcoNoticias";
import React from "react";
import { useState } from "react";
export interface HomeComponentProps {
}
const HomeComponent: React.FC<HomeComponentProps> = () => {
const [buttonPressed, setButtonPressed] = useState<boolean>(false);
const handlePage = () => {
setButtonPressed(true);
};
return (
<>
<View>
<Text style={styles.title}>Hello User</Text>
<View>
{() => buttonPressed(false)} ?
<CardsComponent>
<Text style={styles.textCard}>Tips</Text>
<Button title='Tips' onPress={() => {}} />
</CardsComponent>
<CardsComponent>
<Text style={styles.textCard}>Eco-Noticias</Text>
<Button title='Eco-Noticias' onPress={handlePage} />
</CardsComponent> : <EcoNoticias />
</View>
</View>
</>
);
};
const styles = StyleSheet.create({
title: {
fontSize: 23,
paddingBottom: 50,
textAlign: 'center',
},
textCard: {
color: 'white',
fontWeight: '700',
textAlign: 'center',
paddingBottom: 10,
},
buttonStyle: {
width: '50%',
},
});
export default HomeComponent;
The specific error occurs in the ternary if statement on line 24: "buttonPressed(false)".