React-I am trying to use switch in bootstrap in order to enable DarkMode

The following piece of code does not work:

style={{
              backgroundColor: props.mode === "dark" ? "white" : "grey",
              color: props.mode === "dark" ? "white" : "black",
            }}

The entire code is as follows:

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

function App() {
  const [mode, setMode] = useState("light");
  const toggleMode = () => {
    if (mode === "light") {
      setMode("dark");
      document.body.style.backgroundColor = "grey";
    } else {
      setMode("light");
      document.body.style.backgroundColor = "white";
    }
  };
  return (
    <>
      <Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} />
      <div className="container">
        <TextForm
          heading="Write your text here"
          button1="Convert To Uppercase"
          button2="Convert To LowerCase"
          button3="Clear"
        />
      </div>
    </>
  );
}

export default App;

import React from "react";
import PropTypes from "prop-types";

export default function Navbar(props) {
  return (
    <>
      <nav
        className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}
      >
        <a className="navbar-brand" href="/">
          {props.title}
        </a>
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-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 mr-auto">
            <li className="nav-item active">
              <a className="nav-link" href="/">
                Home <span className="sr-only">(current)</span>
              </a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="/">
                {props.about}
              </a>
            </li>
          </ul>
        </div>
        <div
          className={`form-check form-switch text-${
            props.mode === "light" ? "dark" : "light"
          }`}
        >
          <input
            className="form-check-input"
            type="checkbox"
            role="switch"
            id="flexSwitchCheckDefault"
            onClick={props.toggleMode}
          />

          <label className="form-check-label" htmlFor="flexSwitchCheckDefault">
            Enable Dark Mode
          </label>
        </div>
      </nav>
    </>
  );
}

import React, { useState } from "react";

export default function TextForm(props) {
  const [text, setText] = useState("");
  const clickButtonUpperCase = () => {
    let newText = text.toUpperCase();
    setText(newText);
  };
  const clickButtonLowerCase = () => {
    let newText = text.toLowerCase();
    setText(newText);
  };
  const clickButtonClear = () => {
    let newText = "";
    setText(newText);
  };
  const handleOnChange = (event) => {
    setText(event.target.value);
  };
  return (
    <>
      <div
        className="container"
        style={{ color: props.mode === "dark" ? "white" : "black" }}
      >
        <h1>{props.heading}</h1>
        <div className="form-group">
          <textarea
            className="form-control"
            value={text}
            id="exampleFormControlTextarea1"
            rows="8"
            onChange={handleOnChange}
            style={{
              backgroundColor: props.mode === "dark" ? "white" : "grey",
              color: props.mode === "dark" ? "white" : "black",
            }}
          ></textarea>
        </div>
        <button
          type="button"
          className="btn btn-primary mx-3"
          onClick={clickButtonUpperCase}
        >
          {props.button1}
        </button>
        <button
          type="button"
          className="btn btn-primary mx-3"
          onClick={clickButtonLowerCase}
        >
          {props.button2}
        </button>
        <button
          type="button"
          className="btn btn-primary"
          onClick={clickButtonClear}
        >
          {props.button3}
        </button>
        <div className="container">
          <h3>Number of words</h3>
          <p>{text.split(" ").length}</p>
          <h3>Preview</h3>
          <p>{text}</p>
        </div>
      </div>
    </>
  );
}

You are not passing the props to the TextForm component.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.