0

I am new in typescript. I tried to solve call signature error but I couldn't figure it out.

I try to use custom hooks which it takes a context props and then return the contex like below

export const useCardContext = (): ContextProps => {
  const context = useContext(CardContext);
  if (!context) {
    throw new Error(
      `Card compound components  cannot be rendered outside the Card component`
    );
  }
  return context;
};

and here is my context props and created context

interface ContextProps {
  isAccordionActive: boolean;
  isModalActive: boolean;
  toggleAccordion: Function;
  toggleModal: Function;
}

const CardContext = createContext<ContextProps>({
  isAccordionActive: false,
  isModalActive: false,
  toggleAccordion: () => null,
  toggleModal: () => null,
});

But when I try to use useCardContext hooks inside of another function I get this error.

const data = useCardContext(); // Type 'Context<ContextProps>' has no call signatures. ts 2349

So what I did to solve this, if I export CardContext and use like below I didn't get any error.

//import usecontext and CardContext
const context = useContext(CardContext); //it is fine as expected.

My question is I would like to use the custom hooks (useCardContext) without the error. How I can solve this issue?

kicikhaluk
  • 1
  • 1
  • It sounds like you've misnamed something in your imports and exports. Maybe got confused about the default export. I don't get any error when calling `useCardContext()` https://tsplay.dev/3NDO4w The error `Type 'Context' has no call signatures` means that you are calling the context object instead of the hook. – Linda Paiste Mar 01 '21 at 00:52
  • 1
    You are right. I imported like default way. but should be in curly parentheses. Thanks for comment. I didn't realize it ahah – kicikhaluk Mar 01 '21 at 06:48

0 Answers0