Trigger Modal Close button

Question

I would like some assistance executing onHide event function which would setShow state to false when Close Button inside the Modal component is clicked.

Demo sandbox found here: Sandbox

I've temporarily bypassed submitHandler for debugging the modal only, line 71 will trigger the modal in a normal scenario

Do note Close is meant to window.close()

Answer 1

First, you have to add a new callback (e.g: buttonClose) for your modal's Close button.

<Button
    variant="secondary"
    {...props}
    onClick={() => props.buttonClose()}
    className="text-center"
>
Close
</Button>

And invoke it from your Step Component.

<SuccessModal
    ref={props.superModalElement}
    show={show}
    onHide={handleClose}
    buttonClose={handleClose}
/>

Working demo at CodeSandbox.