CODEWITHSUNDEEP
typescriptreact-nativereact-hooksuse-statereact-typescript
Joaquin Palacios
Joaquin Palacios

Reputation: 346

Typescript useState error boolean has no call signatures

I am using Typescript with React Native and I am having trouble with an error on the console. It says "This expression is not callable. Type 'Boolean' has no call signatures." The code is simple, it just has two cards in the home page and if the user clicks one of them, it should send the user to that page. I tried to achieve that trough useState in order to understand better the hook. This is the code in 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 error it's in the if ternario, line 24: "buttonPressed(false)".

Upvotes: 0

Views: 2243

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 85012

{() => buttonPressed(false)} ?

This line says to switch back to plain javascript (as opposed to jsx), then create a function with the text () => buttonPressed(false), then switch back to jsx and put the string "?" on the screen. The typescript error your getting is pointing out that since buttonPressed is a boolean, it doesn't make sense to try to call it as a function.

From the comments, it appears what you meant to do was this:

{buttonPressed === false ? (
  <React.Fragment>
    <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>
  </React.Fragment>
) : (
  <EcoNoticias />
)}

The <React.Fragment> is necessary, because you want to have multiple elements. If you prefer, you can use the shorthand <></> instead of <React.Fragment></React.Fragment>

Upvotes: 1

Related Questions