Estoy tratando de crear React Context con el que el mode de parámetros y setMode son getter y setter de un estado React. Esto es necesario para poder actualizar el modo css (claro/oscuro) de los componentes secundarios.
Recibo este error de mecanografiado para el value de ColorModeContext (supongo, porque esta línea de interfaz AppContextInterface es incorrecta: setMode:(c: string) => void) :
function App() { interface AppContextInterface { mode: string; setMode:(c: string) => void } const ColorModeContext = React.createContext<AppContextInterface>({ mode: 'dark', // set a default value setMode: () => {}, }) const [mode, setMode] = React.useState<PaletteMode>('dark'); // Update the theme only if the mode changes const theme = React.useMemo(() => createTheme(getTheme(mode)), [mode]); return ( <ColorModeContext.Provider value= {{ mode, setMode }}> <ThemeProvider theme={theme}> <div> </ChildComponent> </div> </ThemeProvider> </ColorModeContext.Provider> ); } export default App;¿Cómo puedo arreglarlo? Gracias
Dado que su tipo useState se define como PaletteMode , debe definir lo mismo en la interfaz de su contexto. Además, también puede usar los mismos tipos que se usan para definir la acción setState (que puede importar desde React):
import { useState, createContext, Dispatch, SetStateAction} from 'react'; interface AppContextInterface { mode: PaletteMode; setMode: Dispatch<SetStateAction<PaletteMode>> } function App() { const ColorModeContext = createContext<AppContextInterface>({ mode: 'dark', // set a default value setMode: () => {}, }) const [mode, setMode] = useState<PaletteMode>('dark');