Cannot invoke an object which is possibly 'undefined' in children component

Question

In my expo typescript app, I have a function in a root component:

  const getCardType = (type = ECardType.WOOD) => {
    setCardType(type);
  };

and pass it in my first child component:

  <Slider data={slideData} autoPlay={false} getCardType={getCardType} />

Here is my first child component where I pass the function, and it types declaration:

  readonly getCardType?: (type: ECardType) => void;



  const Slider: React.FunctionComponent<ISliderProps> = ({
    data,
    autoPlay,
    getCardType,
 })

After that I pass it into a second child component:

<SliderCardItem cardItem={item} index={index} getCardType={getCardType} />

And in this SliderItem component, I use this function:

  useEffect(() => {
    getCardType(cardType);
  }, [cardType]);

But Have a TS error: Cannot invoke an object which is possibly 'undefined' in children component

I set the cardType below in an onPress()
I have this error only in this component
An idea to fix this error?

Answer 1

getCardType might be undefined, as stated in your type here:

getCardType?: (type: ECardType) => void;

Then you're trying to call it without checking if it exists:

useEffect(() => {
  getCardType(cardType);
}, [cardType]);

So you'll need to perform that check:

useEffect(() => {
  if (getCardType) getCardType(cardType);
}, [cardType]);

or with optional chaining:

useEffect(() => {
  getCardType?.(cardType);
}, [cardType]);

If it will always be present then you can make it non optional in your type:

getCardType: (type: ECardType) => void;