0
274
ViewsTypescript type for React's useState() setter when
I'm trying to create React Context which parameters mode and setMode with are getter and setter of a React state. This is needed to be able to update the css mode (light / dark) from child components.
I'm getting this Typescript error for value of ColorModeContext (I guess, because this line of interface AppContextInterface is incorrect: 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;
How can I fix it? Thanks
·
Juan Pablo Isaza
1 answers
Answer question0
Since your useState type is defined as PaletteMode you need to define the same thing in your context's interface. In addition, you can also use the same types used to define the setState action (which you can import from 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');
·
Juan Pablo Isaza
Report
Answer question