Open Popup from another component in REACT

Hello, I have 2 components:

  • a page with a button
  • a popup component

I was able to open popup from the page, but after i close popup from backdrop popup closes, but to re-open it need to click 2 time on the button.

See video: Registrazione schermo 2021-10-07 alle 08.58.07.mov - Google Drive

Where’s the error?

popup code

page code

Seems like you pass wrong onPopupClosed={!toggle} handler, what is !toggle how is it NOT FUNCTION?

from the parent i pass:

  • open state (true or false)
  • toggle (to close popup from popup’s inside button)

I tried also with this but not working

<Popup opened={open} onPopupClosed={!open}>

onPopupClosed accepts function

See pls my code, i get very confused.
What i should change?

Well it is JavaScript basics, in your first example you should pass function, so it probably should be onPopupClosed={toggle}

One more question:
why if i do something like this, backdrop of popup isn’t visible?

{popup && <ItemPopup
    open={true}
    data={data}
    toggle={togglePopup}/> }

Live example would be helpful How to ask a good question on forum

I mean i don’t want to display the popup while state is not true
But doing this, my popup appears without backdrop.

 {popup && <ItemPopup
     open={true}
     data={data}
     toggle={togglePopup}/> }

This is my code
How to fix it?

Live example would be helpful How to ask a good question on forum

here is a demo video: Registrazione schermo 2021-10-14 alle 16.48.09.mov - Google Drive

Video is not helpful. Do I see the code in the video? Do I see what you pass and to what components? Do I see components code?

Posting it for the 3rd time:

Live example would be helpful How to ask a good question on forum

Please take a look into the code: https://z8zvi.csb.app/
Thanks a lot

I can clearly see the backdrop in your link, but I see you still have mess with that toggle functionality, here is the correct example f7-popup-bugs (forked) - CodeSandbox