how use usecontext with TypeScript

Question

I am new to TypeScript, I was trying to use context API but am getting a lot of errors, please can someone help to convert this Javascript code to TypeScript so I can know how it's been done

here the code

import React,{ createContext, useState, useContext } from "react";


const stateContext = createContext()

export const ContextProvider = ({children}) => {
    const [sidebar, setSidebar] = useState(false) 
    const [activeMenu, setActiveMenu] = useState(true)
    const [screenSize, setScreenSize] = useState(undefined)


    return(
        <stateContext.Provider value={{sidebar, setSidebar, screenSize, setScreenSize, activeMenu, setActiveMenu}}>
            {children}
        </stateContext.Provider>
    )
} 

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

samo0ha · Accepted Answer · 2022-09-03 01:22:48Z

1

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

interface IStateContext {
  sidebar: boolean;
  setSidebar: Dispatch<SetStateAction<boolean>>;
  screenSize: number | undefined;
  setScreenSize: Dispatch<SetStateAction<number | undefined>>;
  activeMenu: boolean;
  setActiveMenu: Dispatch<SetStateAction<boolean>>;
}
const stateContext = createContext<IStateContext | null>(null);

interface IContextProviderProps {
  children: React.ReactNode;
}
export const ContextProvider = ({ children }: IContextProviderProps) => {
  const [sidebar, setSidebar] = useState<boolean>(false);
  const [activeMenu, setActiveMenu] = useState<boolean>(true);
  const [screenSize, setScreenSize] = useState<number | undefined>(undefined);

  return (
    <stateContext.Provider
      value={{
        sidebar,
        setSidebar,
        screenSize,
        setScreenSize,
        activeMenu,
        setActiveMenu
      }}
    >
      {children}
    </stateContext.Provider>
  );
};

export const useStateContext = () => useContext(stateContext);

answered Sep 3, 2022 at 1:22

samo0ha

3,8462 gold badges28 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emmanuel uzoezie Over a year ago

thanks but when am trying use it, am getting and error Property 'activeMenu' does not exist on type 'IStateContext | null'. Translation: You're trying to access activeMenu on an object that doesn't contain it.

Collectives™ on Stack Overflow

how use usecontext with TypeScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related