Turning JSX React Context Into TSX

Question

I'm trying to learn TypeScript with React and I'm struggling to use React Context with TypeScript. There's a Context below that I'm trying to turn into TypeScript, I managed to create the context for the menu and it's working fine. Here is it.

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



// define the type for createContext
interface MenuStateContextType {
    activeMenu: boolean
    setActiveMenu: Dispatch<SetStateAction<boolean>>;
}

// create and initialize createContext with a default value
export const MenuStateContext = createContext<MenuStateContextType>({
    activeMenu: true,
    setActiveMenu: () => { }
});




// define react's "children" prop type
type ContextProviderProps = {
    children?: ReactNode
}

export const ContextProvider = ({ children }: ContextProviderProps) => {

    const [activeMenu, setActiveMenu] = useState(true);


    return (
        <MenuStateContext.Provider
            value={{
                activeMenu,
                setActiveMenu,
            }}
        >
            {children}
        </MenuStateContext.Provider>
    )
}


// passing the MenustateContext to useContext() in order to use in the app
export const useMenuStateContext = () => useContext(MenuStateContext)

but I'm struggling to implement the initialState code. I would really appreciate it if someone could help me turning this JSX code into TSX.

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

const StateContext = createContext();

const initialState = {
  chat: false,
  cart: false,
  userProfile: false,
  notification: false,
};

export const ContextProvider = ({ children }) => {
  const [screenSize, setScreenSize] = useState(undefined);
  const [currentColor, setCurrentColor] = useState('#03C9D7');
  const [currentMode, setCurrentMode] = useState('Light');
  const [themeSettings, setThemeSettings] = useState(false);
  const [activeMenu, setActiveMenu] = useState(true);
  const [isClicked, setIsClicked] = useState(initialState);

  const setMode = (e) => {
    setCurrentMode(e.target.value);
    localStorage.setItem('themeMode', e.target.value);
  };

  const setColor = (color) => {
    setCurrentColor(color);
    localStorage.setItem('colorMode', color);
  };

  const handleClick = (clicked) => setIsClicked({ ...initialState, [clicked]: true });

  return (
    // eslint-disable-next-line react/jsx-no-constructed-context-values
    <StateContext.Provider value={{ currentColor, currentMode, activeMenu, screenSize, setScreenSize, handleClick, isClicked, initialState, setIsClicked, setActiveMenu, setCurrentColor, setCurrentMode, setMode, setColor, themeSettings, setThemeSettings }}>
      {children}
    </StateContext.Provider>
  );
};

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

smeet-kachhadiya · Accepted Answer · 2023-04-08 11:07:02Z

0

You must provide initialState to createContext function and must provide types.

    //Instead of this code.....
    const StateContext = createContext();
    
    const initialState = {
      chat: false,
      cart: false,
      userProfile: false,
      notification: false,
    };


    //Use the following code.....
     interface stateContextType={
      chat:boolean,
      cart:boolean,
      userProfile:boolean,
      notification:boolean
     }

     const initialState = {
      chat: false,
      cart: false,
      userProfile: false,
      notification: false,
     };

    const StateContext = createContext<stateContextType>(initialState);

answered Apr 8, 2023 at 11:07

smeet-kachhadiya

1

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

Collectives™ on Stack Overflow

Turning JSX React Context Into TSX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related