Fournisseur de contexte React écrit en TypeScript

Question

Je suis nouveau dans le contexte React et TypeScript et j'essaie d'écrire un contexte pour ouvrir et fermer la barre latérale. C'est mon code

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



interface StateContextType {
    activeMenu: boolean
    setActiveMenu: Dispatch<SetStateAction<boolean>>;
}

export const StateContext = createContext<StateContextType>({
    activeMenu: true,
    setActiveMenu: () => {}
});



type ContextProviderProps = {
    children?: ReactNode
}

export const ContextProvider = ({ children }: ContextProviderProps) => {
    
    return (
        <StateContext.Provider
            value={{ activeMenu: true, setActiveMenu: () => { } }}
        >
            {children}
        </StateContext.Provider>
    )
}

export const useStateContext = () => useContext(StateContext)

Lorsque j'essaie d'utiliser le contexte dans mon application, le booléen "activeMenu" fonctionne correctement, ce qui signifie que la barre latérale s'affiche en fonction de sa valeur. Parce que j'ai défini sa valeur par défaut sur true, la barre latérale est affichée et lorsque je la modifie manuellement à partir du fournisseur de contexte, elle ferme la barre latérale mais le problème ici est que la fonction de définition "setActiveMenu" ne fonctionne pas du tout. Comme je l'ai dit, je suis nouveau dans la réaction au contexte et à la dactylographie, aucune erreur n'apparaît dans ma console et je ne sais pas pourquoi cela se produit.

Answer 1

Vous ne stockez votre état nulle part et votre contexte a besoin de support. Essayez-le

export const ContextProvider = ({ children }: ContextProviderProps) => {
    const [activeMenu, setActiveMenu] = useState(true);

    return (
        
            {children}
        
    )
}