Why do I get two console logs while its should be just one ? react js Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Why do I get two console logs while its should be just one ? react js without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have a simple section in react which contains two buttons logo and banner, on click I am opening a simple modal from web component, now I want when user click cancel to show me something on the console.

Problem: When I click eg Logo button which opens the modal and I click cancel I get the console log I want, and then I click the banner button and open the modal and I click cancel, instead of giving just logs related to the banner button I get both of logs.

my code Live demo : live demo

import * as element from "./custom-element";

const Images = () => {
  const [imgName, setImgName] = useState();
  const [logo, setLogo] = useState();
  const [banner, setBanner] = useState();
  const elementRef = useRef(null);

  const handleUseImage = () => {
    switch (imgName) {
      case "logo":
        console.log("logo name", imgName);
        break;
      case "banner":
        console.log("banner name", imgName);
        break;
      default:
    }
  };

  useEffect(() => {
    if (imgName) {
      elementRef.current.addEventListener("cancel", function (e) {
        handleUseImage(e);
      });
    }
  }, [imgName]);

  const handleLogo = () => {
    setImgName("logo");
    openModal();
  };
  const handleBanner = () => {
    setImgName("banner");
    openModal();
  };
  const openModal = () => {
    elementRef.current.visible = true;
  };
  return (
    <div className="App">
      <custom-element ref={elementRef}></custom-element>
      <button onClick={handleLogo}>Logo </button>
      <button onClick={handleBanner}>Banner </button>
      <span>Logo url: {logo} </span>
      <span>banner url: {banner} </span>
    </div>
  );
};

export default Images;

[enter image description here][2

Why do I get both logs?

Answer

I could be wrong, but I’m pretty sure the issue is that you never remove the event listener, so when you call setImgName it will rerender, and now you’ll have two event listeners, one which is “out of scope” (for lack of a better term – it doesn’t have the the “current” state values, as it was from a previous render). I would try

useEffect(() => {
  if (imgName) {
    elementRef.current.addEventListener("cancel", handleUseImage);
    return () => {
        elementRef.current.removeEventListener("cancel", handleUseImage);
    }
  }
}, [imgName]);
We are here to answer your question about Why do I get two console logs while its should be just one ? react js - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji