Quasy – modal component does not hide itself
I have this component, it is supposed to work as some sort of extra-entering-dialog.
It is imported in Edit function of the block.
/**
* Component for entering biography
*/
import { InnerBlocks } from 'wordpress user/block-editor';
import { Button } from 'wordpress user/components';
import { useState } from 'wordpress user/element';
const BiographyModal = ({ name }) => {
const [ isOpen, setIsOpen ] = useState(false);
const modal =
<div className="biography-modal">
<h3>{ `Životopis ${ name }` }</h3>
<InnerBlocks />
<Button isDefault onClick={ () => setIsOpen({ isOpen: false }) }>
Završi uređivanje
</Button>
</div>;
return (
<div>
<Button isDefault onClick={ () => setIsOpen({ isOpen: true }) }>Uredi životopis</Button>
{ isOpen && modal }
</div>
)
}
export default BiographyModal;
It does open on button lower in code, but it does not close when clicking on button higher in code. It won’t even close when I change state of isOpen by using React developer tools in browser. At first I thought this was because dismounting of InnerBlocks or Button is not allowed, but after I remove those two (and give lower button possibility to function as toggle button (setIsOpen({ isOpen: ! isOpen })
), this still does not close. Any clues?
Leave an answer