How to close modal in react hooks?

Question

I have a react modal, which inside a body contains a button, on clicking this button it opens new page eg payment page but the modal still open, now I want on the click it should open a new page and close the modal.

Here is my modal

function ModalA() {
    const history = useHistory();
    const dispatch = useDispatch();
    
    const handleCloseModal = () => {
        dispatch(actions.modalsActions.closeModal({
            id: "ModalA",
        }))
    }
    return (
       <Modal id="ModalA">

          <button onClick={}>Upgrade Now</button>

       </Modal>
    )
}

export default ModalA

Now when I click the Upgrade now button it open a new page but it does not close the modal.

Is there any good solution for this problem?

Answer 1

You just have to call both functions inside the onClick. The below code should work

<button onClick={() =>{
    handleCloseModal()
    history.push('/account/payments')   
}}>Upgrade Now</button>