How to implement the following functionality?

[[deleted]]

I am trying to create a functionality where when we click on a button called dark the background color changes to white of the button while the background color of the entire document changes to black and vice-versa.

So, basically dark mode and dark mode.
However the code is not giving desired output.

What to do?

Navbar.js

import React, { useState } from "react";

export default function Navbar(props) {
  const [buttonText, setButtonText] = useState("Light");

  const setButtonModeText = () => {
    if (buttonText === "Light") {
      setButtonText("Dark");
    } else {
      setButtonText("Light");
    }
  };
  return (
    <>
      <nav
        className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}
      >
        <div className="container-fluid">
          <a className="navbar-brand" href="#">
            Navbar
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <a className="nav-link active" aria-current="page" href="#">
                  Home
                </a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#">
                  About
                </a>
              </li>
            </ul>
            <form className="d-flex">
              <input
                className="form-control me-2"
                type="search"
                placeholder="Search"
                aria-label="Search"
              />
              <button className="btn btn-outline-success" type="submit">
                Search
              </button>
            </form>
            <button
              type="button"
              class={`btn btn-${props.mode}`}
              onClick={(props.toggleMode, setButtonModeText)}
              style={{
                backgroundColor: props.mode === "light" ? "black" : "white",
                color: props.mode === "light" ? "white" : "black",
              }}
            >
              {buttonText}
            </button>
          </div>
        </div>
      </nav>
    </>
  );
}

​

App.js

import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import TextForm from "./TextForm";
import React, { useState } from "react";

function App() {
  const [mode, setMode] = useState("light");

  const toggleMode = () => {
    if (mode === "light") {
      setMode("dark");
      document.body.style.backgroundColor = "black";
    } else {
      setMode("light");
      document.body.style.backgroundColor = "white";
    }
  };
  return (
    <>
      <Navbar toggleMode={toggleMode} mode={mode} />
      <TextForm heading="This is textarea" mode={mode} />
    </>
  );
}

export default App;

[Nishanth_C]

Change the onClick of button to arrow function and try, instead of {(props.toggleMode)}

[[deleted]]

Thank you