I am not able to switch from dark mode back to normal mode

Question

[enter image description here](https://i.stack.imgur.enter image description herecom/CqrlG.png)

I am not able to switch back from dark mode to light mode after entering below code in my switchMode function.

textAreaStyleFinal({
        backgroundColor: "darkgrey",
        color: "darkblue",
      });

Without it everything is working fine. What is the problem here? Can anyone please explain? The code is below.

import React, { useState } from "react";

export default function TextForm(props) {
  const handleUpClick = () => {
    const newText = text.toUpperCase();
    setText(newText);
  };

  const handleDownClick = () => {
    const newText = text.toLowerCase();
    setText(newText);
  };

  const handleClearClick = () => {
    setText("");
  };

  const handleReverseClick = () => {
    setText(text.split(" ").reverse().join(" "));
  };

  const handleOnChange = (Event) => {
    setText(Event.target.value);
  };

  let mode = "light";
  const switchMode = () => {
    if (mode === "light") {
      document.body.style.backgroundColor = "black";
      document.body.style.color = "white";
      mode = "dark";
      textAreaStyleFinal({
        backgroundColor: "darkgrey",
        color: "darkblue",
      });
    } else {
      document.body.style.backgroundColor = "white";
      document.body.style.color = "black";
      mode = "light";
      textAreaStyleFinal({
        backgroundColor: "white",
        color: "black",
      });
    }
  };

  const [text, setText] = useState("");
  const [textAreaStyleInitial, textAreaStyleFinal] = useState({
    backgroundColor: "white",
    color: "black",
  });

  return (
    <>
      <div className="container">
        <h1>{props.heading}</h1>
        <div className="mb-3">
          <textarea
            className="form-control"
            id="exampleFormControlTextarea1"
            rows="3"
            placeholder="Enter Your Text Here"
            value={text}
            onChange={handleOnChange}
            style={textAreaStyleInitial}
          ></textarea>
        </div>
        <button className="btn btn-primary mx-1" onClick={handleUpClick}>
          Convert to Uppercase
        </button>
        <button className="btn btn-primary mx-1" onClick={handleDownClick}>
          Convert to Lowercase
        </button>
        <button className="btn btn-primary mx-1" onClick={handleReverseClick}>
          Reverse Sentence
        </button>
        <button className="btn btn-primary mx-1" onClick={handleClearClick}>
          Clear All
        </button>
      </div>
      <div className="container my-3">
        <div className="form-check form-switch my-3">
          <label className="form-check-label" htmlFor="flexSwitchCheckDefault">
            Enable Dark Mode
          </label>
          <input
            className="form-check-input"
            type="checkbox"
            role="switch"
            id="flexSwitchCheckDefault"
            onChange={switchMode}
          />
        </div>
        <h2>Your Text Summary</h2>
        <p>
          {text.split(" ").length} Words and {text.length} characters
        </p>
      </div>
    </>
  );
}

I tried everything that I know but I am not able to understand

Answer 1

Looks like you're using React, so I would highly recommend switching your let mode = "light" to using useState(), similarly to how you use it for the text and textAreaStyleInital. Here's an example:

const [mode, setMode] = useState("light");
  const switchMode = () => {
    if (mode === "light") {
      // other code
      setMode("dark");
      // other code
    } else {
      // other code
      setMode("light");
      // other code
    }
  };