Typescript type for React's useState() setter when

user_15758609 0
Viewed 1307

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):

Error message

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

react-hooks typescript reactjs javascript types
1 Answers

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');
user_51574540
Related