calling close modal function inside another function typescript

Question

1. My question is why after filling the form and pressing the "confirm" button, the chequeModal is not closed? By calling "handleChequeModalClose()" inside "handleSubmit()" function I expected it to close the Modal. The "close" button is working fine and closes the chequeModal.

import {submitTender} from '../utils';
const ChequeModal = ({
        chequeModalOpen,
        handleChequeModalClose,
        chequeDetails,
        localAmount
    }: ChequeModalProps) => {
        const handleSubmit = (e) => {
            e.preventDefault();
            submitTender({
                ...chequeDetails,

            });
            handleChequeModalClose();
        };
        return ( 
            <Panel overlay title = "Cheque details"
            variant = {
                PanelHeaderVariant.TitleAndCloseButton
            }
            size = {
                PanelSize.Large
            }
            onClose = {
                handleChequeModalClose()
            }
            open = {
                chequeModalOpen
            } >
            <LabelWrapper> Cheque number < /LabelWrapper>  
            <InputWrapper name = "chequeNumber"
            onInput = {
                (e: any) => {
                    setChequeNumberInput(filterDigits(e.target.value));
                }
            }
            value = {
                chequeNumberInput
            }
            onBlur = {
                () => checkError(errorType.chequeNumber)
            }
            errorMessage = {
                chequeNumberError
            }
            /> 
            <Button label = "Confirm"
            id = "confirm-btn"
            data - autofocus onClick = {
                handleSubmit
            }
            /> 
            <Button label = "Cancel"
            variant = {
                ButtonVariant.SecondaryFilled
            }
            onClick = {
                handleChequeModalClose()
            }
            />  
            </Panel>

        }


        ///////CheckoutPage.tsx//////
        const CheckoutPage = ({
                    //...some code here}:CheckoutPageProps) =>{
                    const [chequeModalOpen, setChequeModalOpen] = useState(false);
                    const handleChequeModalClose = () => {
                        setChequeModalOpen(false);
                    };
                    return ( 
                      <ChequeModal chequeModalOpen = {
                            chequeModalOpen
                        }
                        
                        handleChequeModalClose = {
                            () => handleChequeModalClose
                        }
                        localAmount = {
                            keyInAmount
                        }
                        chequeDetails = {
                            chequeDetails
                        } >
                        </ChequeModal>
                    )
                }

1. I will appreciate it if you guys could help me out.

Answer 1

In your CheckoutPage component when sending your closing function in the ChequeModal component you are sending a function that will return a reference to it when called:

handleChequeModalClose = {() => handleChequeModalClose} 

It is working for the close button as your are calling it upon rendering your component, the actual close function will be then called when the user close the modal.

However in your submit function you are calling the function sent in the props but the actual closing function is never called.

You should send in the props a direct reference to your function as such:

handleChequeModalClose = {handleChequeModalClose}

and then send it to the onCloseprops of the modal without calling it:

onClose = {handleChequeModalClose}

In that case your submit function will not have to be modified and your modal will successfully close itself.

P.S For later questions on StackOverflow please use proper formatting and try to send a working example of your code.