How to open a modal from a parent component and have the close action reset the parent component so that the modal can open again

Question

I have seen similar problems here but I'm relatively new to React and my app is using functional components rather than classes as in most of the examples I can find. So the answers I've found are difficult for me to adapt.

Here's my issue, I have a parent component that displays a modal by toggling a state variable, all works fine, untill I close the modal from within the modal. In that case I have to push the parent button twice to get it to open again since I have to toggle to false and then to true again.

This is clearly not the correct approach but I've tried passing different things in to the modal, eg the setState(), and I can't get it to work. I'm using semanti-ui-react

Parent component code:

import React, { useState } from "react";
import { Button } from "semantic-ui-react";
import { ModalComponent } from "/imports/ui/ModalComponent";

export const MyDashboard = () => {
    const [openModal, setOpenModal] = useState(false);

    const handleOpenModal = () => {
        setOpenModal(!openModal);
    }

    return (
        <div>
            <Button
               onClick={ handleOpenModal }
               content="Open Modal"
               color="green"
             />
            {openModal &&
                <ModalComponent
                />
                }

        </div>
  )};

ModalComponent code:

import React, {useState} from "react";
import {Modal, Button} from "semantic-ui-react";

export const ModalComponent = () => {
    const [isOpen, setIsOpen] = useState(true);

    // enable form items as this functionality becomes available
    return (
        <Modal
            onClose={() => setIsOpen(false)}
            onOpen={() => setIsOpen(true)}
            open={isOpen}
        >
            <Modal.Header>A modal is showing</Modal.Header>            
                <Modal.Actions>
                    <Button
                        content="Save"
                        color='green'
                        onClick={() => {                            
                            setIsOpen(false);
                            }
                        }
                    />
                    <Button color='black' onClick={() => setIsOpen(false)}>
                        Cancel
                    </Button>
                </Modal.Actions>
        </Modal>
    );
};

I assume I have to pass some state back and forth but I'm not sure how.

Answer 1

try this:

Parent Componnet:

<ModalComponent toggleModal={handleOpenModal} />

Modal Component:

export const ModalComponent = ({toggleModal}) => {
    ...your codes

    toggleIt = () => {
        setIsOpen(false);
        toggleModal();
    }

    return (
        ...your codes

        <Button color='black' onClick={toggleIt} />
             Cancel
        <Button>

        ...your codes
     );
}