createContext and typescript

if i have context like this

export const FavoriteContext = createContext<any>(null)

export const FavoriteContext = createContext<any>(null)

and then in next _app doing something like

const [favorite, setFavorite] = useState<Array<string>>([]);

const [favorite, setFavorite] = useState<Array<string>>([]);

<FavoriteContext.Provider value={{ favorite, setFavorite }}>

<FavoriteContext.Provider value={{ favorite, setFavorite }}>

how should I type it correctly? now type of

{ favorite, setFavorite }

{ favorite, setFavorite }

is any that's obviously bad right?

9 Replies

just type the context

Pod•3y ago

Since you're in this server you should try zustand, cooler than context 😎

export const FavoriteContext = createContext<string[] | null>(null);

export const FavoriteContext = createContext<string[] | null>(null);

Since you're in this server, you shouldn't suggest people use technologies that they might not need simply based on whether it's cool or not

Pod•3y ago

Zustand is a great replacement for context and provides a much simpler interface that would likely benefit them here, being cool was sarcasm

noctateOP•3y ago

yeah ive heard of zustand but i want to learn typescript and basic react too @Pod

noctateOP•3y ago

@iDarkLightning now i have error: on the

<FavoriteContext.Provider value={{ -> here favorite, setFavorite }}>

<FavoriteContext.Provider value={{ -> here favorite, setFavorite }}>

right, sorry my type was very wrong

createContext<{ favorite: string[]; setFavorite: React.Dispatch<React.SetStateAction<string[]>> }>

createContext<{ favorite: string[]; setFavorite: React.Dispatch<React.SetStateAction<string[]>> }>

is right I believe

Pod•3y ago

👍

I might be remembering the setState type wrong, just hover over ur setState to see the right type