coding a toggle mode using state object

Question

I have a problem to write code: I have a state

const [theme, setTheme] = useState({ mode: "LIGHT" });

and I want to made a toggle function that change mode to 'DARK' and change DARK to 'LIGHT' by double click. how can I write it?

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

const DARK = "DARK";

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState({ mode: "LIGHT" });

  const toggleThemeMode = () => {
    setTheme();
    console.log(theme);
  };

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

const useTheme = () => useContext(ThemeContext);

export { ThemeProvider, useTheme, DARK };

yes. for example when you click a button theme.mode changes to 'DARK' and when you click again theme.mode changes to 'LIGHT' — Mehrdad Mousavi
– Mehrdad Mousavi, Commented Nov 21, 2022 at 7:57
How do you intend to do the change ? is it a toggle button? Is it a custom option with radio with 2 option, 3options,.. etc? — innocent
– innocent, Commented Nov 21, 2022 at 7:57
setTheme(prev=>({...prev,mode: mode==="dark"?"dark":"light"})) — innocent
– innocent, Commented Nov 21, 2022 at 11:35

KcH · Accepted Answer · 2022-11-21 08:05:53Z

A sample e.g. with onDoubleClick event , but if you mean just on single click change event name to onClick

const {useState} = React;

const App = () => {
    const [theme, setTheme] = useState("Dark");
  
    const handleClick = () =>{
      setTheme(prev=> prev === "Dark" ? "Light" : "Dark")
    }
    return (
        <div className={`theme ${theme}`}>
           <h2> Double click to change the theme - current theme: {theme} </h2>
           <br />
           <br />
           <button className={`btn ${theme}`} onDoubleClick={handleClick}>Change Theme</button>
           <br />
           <br />
           <p>Some test data </p>
        </div>
    );
};


ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App/>
);

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.Dark{
  background: black;
  color: white;
}

.Light{
  background: white;
  color: black;
}

.theme{
  height: 100vh;
}

.btn{
 border: 2px solid pink;
 background: gray;
 border-radius: 5px;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Fabian Strathaus · Accepted Answer · 2022-11-21 07:56:39Z

0

You can just use the following code:

const [theme, setTheme] = useState("LIGHT");

...

setTheme(theme === DARK ? "LIGHT" : DARK);

Nevertheless I suggest you to at least provide also a const for "LIGHT" value or even better: an enum. If you want to stick with two values (light and dark), you can also define the state as a boolean.

answered Nov 21, 2022 at 7:56

Fabian Strathaus

3,6501 gold badge8 silver badges30 bronze badges

2 Comments

Mehrdad Mousavi Over a year ago

thank you, I think it will worl. I have a state in the name of theme, and theme is an object that has key mode, mode is equal to 'light'. I want to made toggle function that change theme.mode to DARK

Fabian Strathaus Over a year ago

Why exactly do you want to have an object with one property as the state instead of a plain string (or enum). Where do you see the benefit?

Collectives™ on Stack Overflow

coding a toggle mode using state object

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related