what I have to do to declare a variable in "App.js" in React.JS and use this variable in &-CodePudding

the image of the final project

when I click on one of the orange buttons it should print the "p1" variable to the console but the value of this variable is Null I don't know why this variable gives me that error and I want to use it in the onClick function inside the buttons.

import img_1 from "./images/bg-pattern-desktop.svg"; import img_2 from "./images/illustration-woman-online-desktop.svg"; import img_3 from "./images/illustration-box-desktop.svg";

function App() { const p1 = document.querySelector("p1");

return (
  <>
    <img src={img_3} alt="img_3" className="img_3" />

    <div className="container">
      <div className="imgBox">
        <img src={img_1} alt="img_1" className="img_1" />
        <img src={img_2} alt="img_2" className="img_2" />
      </div>

      <div className="textBox">
        <h1>FAQ</h1>
        <div className="questions">
          <div>
            {/* the value of p1 is null */}
            {/* because it can't get document.querySelector(".p1") above */}
            <button
              onClick={() => {
                console.log(p1);
              }}
            >
              How many team members can I invite?
            </button>
            <p className="p1">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
              Temporibus obcaecati, quae, corporis.
            </p>
          </div>

          <hr />

          <div>
            <button onClick={() => {}}>
              How many team members can I invite?
            </button>
            <p className="notactive p2">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
              Temporibus obcaecati, quae, corporis.
            </p>
          </div>

          <hr />

          <div>
            <button onClick={() => {}}>
              How many team members can I invite?
            </button>
            <p className="notactive p3">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
              Temporibus obcaecati, quae, corporis.
            </p>
          </div>

          <hr />

          <div>
            <button onClick={() => {}}>
              How many team members can I invite?
            </button>
            <p className="notactive p4">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
              Temporibus obcaecati, quae, corporis.
            </p>
          </div>

          <hr />

          <div>
            <button onClick={() => {}}>
              How many team members can I invite?
            </button>
            <p className="notactive p5">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
              Temporibus obcaecati, quae, corporis.
            </p>
          </div>

          <hr />
        </div>
      </div>
    </div>
  </>
);

}

export default App;

CodePudding user response：

Targeting a class with a querySelector string needs a dot:

function App() { const p1 = document.querySelector("p1");
// should be:
function App() { const p1 = document.querySelector(".p1");

If you want to store a variable in a React component, I suggest you look into useState() instead of a query selector:

import { useState } from "react";
function App() {
    const [fillerText, setFillerText] = useState(
        "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus obcaecati, quae, corporis."
    );

    return (
        // other stuffs
        <div>
            <button onClick={() => console.log(fillerText)}>
                How many team members can I invite?
            </button>
            <p className="p1">{fillerText}</p>
        </div>
        // other stuffs
    );
}

CodePudding user response：

There is no error here, simply a misunderstanding on your behalf I presume. Your issue is trying to use document.querySelector within the react component.

Simple Answer: Use useRef instead as below. Also, checkout the docs for a better understanding.

Full Answer: When the compoent first renders, document.querySelector is run before you return the element with the class "p1". Therefore it hasn't yet been redered on the page. There document.querySelector will fail to find the element, returning null instead.

function App() {
  const p1 = React.useRef(null);
  
  return (
    <React.Fragment>
      <img src="" alt="img_3" className="img_3" />
      
      <div className="container">
         <div className="imgBox">
          <img src="" alt="img_1" className="img_1" />
          <img src="" alt="img_2" className="img_2" />
        </div>

        <div className="textBox">
          <h1>FAQ</h1>
          <div className="questions">
            <div>
              {/* the value of p1 is null */}
              {/* because it can't get document.querySelector(".p1") above */}
              <button
                onClick={() => {
                  console.log(p1);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p1} className="p1">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button onClick={() => {}}>
                How many team members can I invite?
              </button>
              <p className="notactive p2">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button onClick={() => {}}>
                How many team members can I invite?
              </button>
              <p className="notactive p3">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button onClick={() => {}}>
                How many team members can I invite?
              </button>
              <p className="notactive p4">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button onClick={() => {}}>
                How many team members can I invite?
              </button>
              <p className="notactive p5">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};


ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js" integrity="sha512-bom/WJB/C/RVkBpU7ic7qopGc/CSWjj1aZhZLykucHKCZuT9h881Uh8VdvEioA6L0vQ/Tsaw1uK2Pnj312c17g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js" integrity="sha512-HBhuJNLkfYh0Z  tgfKYCstQZzgQmMbAfK4FvzxHrUYqfI FRnXeBn1ZXu 1NSGWissxE2ipI eKaoRbRV2W4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="root"></div>