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?
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>;
};