React Typescript Context – issue with type

March 24, 2022

I’m currently learning TypeScript with React and I’m finding some bits a very challenging.
I’ve created cart.context.tsx but I keep getting error of:

(property) React.ProviderProps<AppContextInterface>.value: AppContextInterface
Type '{ isCartOpen: boolean; setIsCartOpen: React.Dispatch<React.SetStateAction<boolean>>; }' is not assignable to type 'AppContextInterface'.
  Types of property 'setIsCartOpen' are incompatible.
    Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '(value: Dispatch<SetStateAction<boolean>>) => boolean'.
      Types of parameters 'value' and 'value' are incompatible.
        Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type 'SetStateAction<boolean>'.
          Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '(prevState: boolean) => boolean'.
            Type 'void' is not assignable to type 'boolean'.ts(2322)
index.d.ts(338, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<AppContextInterface>'

Here’s my code:

import { createContext, ReactNode, useState } from "react";

interface AppContextInterface {
  isCartOpen: boolean;
  setIsCartOpen: (value: React.Dispatch<React.SetStateAction<boolean>>) => boolean;
}

export const cartContextDefaultValue: AppContextInterface = {
  isCartOpen: false,
  setIsCartOpen: () => false
}

export const CartContext = createContext<AppContextInterface>(cartContextDefaultValue);

export const CartProvider = ({ children }: { children: ReactNode }) => {
  const [isCartOpen, setIsCartOpen] = useState<boolean>(false);
  const value = { isCartOpen, setIsCartOpen }

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
};

the error throws on the last line with value property:

return <CartContext.Provider value={value}>{children}</CartContext.Provider>;

Can somebody have a look at it and help, please?
And what am I doing wrong?

>Solution :

Replace your interface AppContextInterface with this:

interface AppContextInterface {
  isCartOpen: boolean;
  setIsCartOpen: Dispatch<SetStateAction<boolean>>;
}

You’ll need to import Dispatch and SetStateAction from react as well like this:

import { createContext, Dispatch, ReactNode, SetStateAction, useState } from "react";

It should fix the issue.

Here setIsCartOpen is a function returned from useState() hook and so it’s type cannot be (value: React.Dispatch<React.SetStateAction<boolean>>) => boolean;. That’s why you were getting this error.

Full code:

import { createContext, Dispatch, ReactNode, SetStateAction, useState } from "react";

interface AppContextInterface {
  isCartOpen: boolean;
  setIsCartOpen: Dispatch<SetStateAction<boolean>>;
}

export const cartContextDefaultValue: AppContextInterface = {
  isCartOpen: false,
  setIsCartOpen: () => false
}

export const CartContext = createContext<AppContextInterface>(cartContextDefaultValue);

export const CartProvider = ({ children }: { children: ReactNode }) => {
  const [isCartOpen, setIsCartOpen] = useState<boolean>(false);
  const value = { isCartOpen, setIsCartOpen }

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
};