Div id is not defined in a function using react.js

Question

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? :)

Answer 1

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>