How to conditionally change visibility with React?-CodePudding

I am trying to change a div's visibility from hidden to visible using button click. But even when I am clicking the button, the visibility is not changing. I have logged the console after the clickHandler, and it still says false even after I set it to true inside the function. So far, I have this,

let clicked = false;
  //change image on fortune cookie click
  const clickHandler = (e) => {
    e.target.setAttribute(
      "src",
      "https://i.ibb.co/cksx7kr/kisspng-fortune-cookie-drawing-clip-art-fortune-cookie-5b237469209879-9079770415290502171335.png"
    );
    
    clicked = true;
  };
  console.log(clicked);
  return (
    <div className="App">
      <button onClick={clickHandler}>
        <img
          className="cookie"
          src="https://i.ibb.co/9YQV2qq/kisspng-fortune-cookie-biscuits-bakery-drawing-clip-art-fortune-cookies-5b0ec5e3013c23-3980054715276.png"
        />
      </button>
      <div
        className="fortuneMessage"
        style={{ visibility: clicked ? "visible" : "hidden" }}
      >
        {fortune}
      </div>
    </div>
  );

CodePudding user response：

When you are using React, you need a state in order to have a DOM update. That would fork for you (don't forget to import useState at the top of your file) :

  const [clicked, setClicked] = useState(false);
  const [src, setSrc] = useState("https://i.ibb.co/9YQV2qq/kisspng-fortune-cookie-biscuits-bakery-drawing-clip-art-fortune-cookies-5b0ec5e3013c23-3980054715276.png");
  
  //change image on fortune cookie click
  const clickHandler = (e) => {
    setSrc("https://i.ibb.co/cksx7kr/kisspng-fortune-cookie-drawing-clip-art-fortune-cookie-5b237469209879-9079770415290502171335.png");
    setClicked(true);
  };
  console.log(clicked);
  return (
    <div className="App">
      <button onClick={clickHandler}>
        <img
          className="cookie"
          src={src}
        />
      </button>
      <div
        className="fortuneMessage"
        style={{ visibility: clicked ? "visible" : "hidden" }}
      >
        {fortune}
      </div>
    </div>
  );

CodePudding user response：

You'll need to use state instead of the plain clicked variable.

const [clicked, setClicked] = useState(false);

Call the setState function inside the clickHandler function instead of setting clicked to true.

setClicked(true);

CodePudding user response：

in React, the variable is not two way binding.

The clicked variable in your function will only get to be true in the function itself but not outside the function

So in this case you need to use useState so that the clicked state will be re-rendered again with updated boolean

const [clicked, setClicked] = useState(false)
const clickHandler = () => {
    setClicked(true)
}

so that your clicked variable will be updated, hence the css will be updated again.

for more reference with useState can check their documentation https://reactjs.org/docs/hooks-state.html