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>
</>
);
}