There’s no variable named themebox in your javascript. Try this out instead, using react to manage state and functions to change the state on click.
// Get a hook function
const {useState} = React;
const Notifications = () => {
const [displayedText, setDisplayedText] = useState("");
const niceText = () => setDisplayedText("Nice");
const fairText = () => setDisplayedText("Fair");
const aggressiveText = () => setDisplayedText("Aggressive");
const threateningText = () => setDisplayedText("Threatening");
return (
<div className="notification-container">
<h3>Notifications</h3>
<div className="notif-picker">
<p className="Selected" onClick={niceText}>
Nice
</p>
<p onClick={fairText}>Fair </p>
<p onClick={aggressiveText}> Aggressive </p>
<p onClick={threateningText}>Threatening </p>
</div>
<div className="theme-show-box">
<div className="theme-box" id="themebox">{displayedText}</div>
</div>
</div>
);
};
// Render it
ReactDOM.createRoot(
document.getElementById("root")
).render(
<Notifications />
);
<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>
React has it’s own way of updating the DOM so it’s generally a bad idea to try and manipulate the DOM directly. You should be using and updating state, and then using that state in the JSX.
By doing this you only really need one function which destructures the text content from the clicked element, and sets the state with that text. When the state changes that changed value is reflected in the JSX.
The (new) React documentation site has a good rundown on “how to think in React”.
const { useState } = React;
function Example() {
// Initialise the state to an empty string
const [ text, setText ] = useState('');
// When any of the paragraphs is clicked
// destructure the textContent from that element
// and then set the state's new value. `e` is the
// event, and `target` is the element that fired the
// event ie. a paragraph element
function handleClick(e) {
const { textContent } = e.target;
setText(textContent);
}
return (
<div className="notification-container">
<h3>Notifications</h3>
<div className="notif-picker">
<p onClick={handleClick}>Nice </p>
<p onClick={handleClick}>Fair </p>
<p onClick={handleClick}>Aggressive </p>
<p onClick={handleClick}>Threatening </p>
</div>
<div className="theme-show-box">
<div className="theme-box">{text}</div>
</div>
</div>
);
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>
import React from "react";
import "./profile.css";
const Notifications = () => {
function changeText() {
themebox.textContent =
"Nice";
}
function changeText2() {
themebox.textContent =
"Fair";
}
function changeText3() {
themebox.textContent = "Aggressive";
}
function changeText4() {
themebox.textContent =
"Threatening";
}
return (
<div className="notification-container">
<h3>Notifications</h3>
<div className="notif-picker">
<p className="Selected" onClick={changeText}>
Nice
</p>
<p onClick={changeText2}>Fair </p>
<p onClick={changeText3}> Aggressive </p>
<p onClick={changeText4}>Threatening </p>
</div>
<div className="theme-show-box">
<div className="theme-box" id="themebox"></div>
</div>
</div>
);
};
export default Notifications;
When i click on one of p tags it shows the text that i put in a function which is displayed in the div with classname “theme-box” and id “themebox”. Everything seems to work fine, but i get an error in react saying themebox is not defined. Any idea how i can solve that error? 🙂
Oh i see, thank you for the answer, do you have any code suggestions how i can do it?
