how to change value of react Context from another component React

Question

so i'm trying to implement a simple theme switch via react context, and i need to change the value of context(in ThemeProvider.jsx) provider according to a onChange event in another component(ThemeSwitcher.jsx).

ThemeProvider.jsx :

import React, {createContext} from "react";
import {THEME_TYPE} from "../constants";

export const ThemeContext = createContext(THEME_TYPE.LIGHT);


const ThemeProvider = ({ children }) => {
    return <>
        <ThemeContext.Provider value={//THEME_TYPE.LIGHT or THEME_TYPE.DARK)}>
            {children}
        </ThemeContext.Provider>
    </>
};

export default ThemeProvider;

ThemeSwitcher.jsx :

import React, {useContext} from "react";
import { THEME_TYPE } from "../constants";
import {ThemeContext} from "../providers/ThemeProvider";



const ThemeSwitcher = () => {
  const themeMode = useContext(ThemeContext);
  const handleThemeChange = (e) => {
     //value of context should change according to argument 'e'
  };

  return (
    <div className="switch-container">
      <label className="switch">
        <input
          data-testid="theme-changer"
          type="checkbox"
          checked={themeMode === THEME_TYPE.DARK}
          onChange={handleThemeChange}
        />
        <span className="slider round"></span>
      </label>
      <span className="text-color bold">Dark mode</span>
    </div>
  );
};

export default ThemeSwitcher;

App.jsx:

import React, {useContext} from "react";
import { Helmet } from "react-helmet";
import NameBox from "./components/NameBox";
import ThemeSwitcher from "./components/ThemeSwitcher";
import { THEME_TYPE } from "./constants";
import Styles from "./data/Styles";
import ThemeProvider from "./providers/ThemeProvider";
import {ThemeContext} from "./providers/ThemeProvider";


const StyleTag = () => {
    const themeMode = useContext(ThemeContext);
  return (
    <Helmet>
      <style>{Styles(themeMode)}</style>
    </Helmet>
  );
};

function App() {
  return (
    <ThemeProvider>
      <StyleTag />
      <NameBox />
      <ThemeSwitcher />
    </ThemeProvider>
  );
}

export default App;

and styles.js if necessary:

import { THEME_TYPE } from "../constants";

const Theme = {
  [THEME_TYPE.LIGHT]: {
    background: "#fafafa",
    text: "#rgba(0, 0, 0, 0.87)",
    divider: "rgba(0, 0, 0, 0.12)",
  },
  [THEME_TYPE.DARK]: {
    background: "#303030",
    text: "#fff",
    divider: "rgba(255, 255, 255, 0.12)",
  },
};

const Styles = (theme) => `
body {background-color: ${Theme[theme].background};}
.text-color {color: ${Theme[theme].text};}
.box {border: 1px solid ${Theme[theme].divider}}
`;

export default Styles;

as you see the value of context should be changed according to input onChange event. i couldn't come up with proper solution for relating these two, so your help is appreciated.

Lash

Answer 1

I suggest adding useState() hook inside ThemeProvider component. Here is the codesandbox: https://codesandbox.io/s/magical-franklin-cril0?file=/src/ThemeProvider.jsx

That is how the code looks like:

import React, { createContext, useState } from "react";
import { THEME_TYPE } from "./constants";

export const ThemeContext = createContext(THEME_TYPE.LIGHT);

const ThemeProvider = ({ children }) => {
   const [themeType, setThemeType] = useState(THEME_TYPE.LIGHT);

   const changeTheme = (value) => {
      if (value) {
         setThemeType(THEME_TYPE.DARK);
      } else {
         setThemeType(THEME_TYPE.LIGHT);
      }
   };

    return (
      <>
        <ThemeContext.Provider value={{ themeType, changeTheme }}>
          {children}
        </ThemeContext.Provider>
      </>
    );
 };

export default ThemeProvider;

And then you would use the context where needed like this:

const themeMode = useContext(ThemeContext)
themeMode.themeType // THEME_TYPE.LIGHT or THEME_TYPE.DARK
themeMode.changeTheme(value) // if value is true, it would change to dark mode, if false to light mode

Firstling