javascript - How to Double Click Toggle visibility of React Component?

Question

Currently have a popup component showing up double click using the onDoubleClick() handler.But I'd like to close that popup on double click of the popup component but I can't seem to get it to work. Here is what I have been trying, the thought process was to just to set toggleModal to false and it should work.

const [selectedImageId, setSelectedImageId] = useState(-1);
const [toggleModal, setToggleModal] = useState(false);

const handleModalPopupOnClick = (id) => {
    setSelectedImageId(id);
    setToggleModal(true);
};

return (
      <div>
         {toggleModal && <PopupModal onDoubleClick={setToggleModal(false)}/>}
          <div onDoubleClick{()=> handleModalPopupOnClick(image.id)>Open Popup</div>
      </div>
     

)

Any ideas? Thank you for any suggestions or guidance.

question from:https://stackoverflow.com/questions/65836941/how-to-double-click-toggle-visibility-of-react-component

Answer 1

The line

{toggleModal && <PopupModal onDoubleClick={setToggleModal(false)}/>}

Is immediately calling setToggleModal with an argument of false when the component is rendered, and I believe undefined becomes the value of onDoubleClick. (Not 100% on if setState has a return value or not)

To fix your problem you should provided this as a prop:

{toggleModal && <PopupModal onDoubleClick={() => setToggleModal(false)}/>}

This is providing a function definition rather than calling the function.