Quasy – modal component does not hide itself

Question

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?

0
Lovor 2 months 2021-10-02T08:03:01-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse