In an Ionic React application, how can i change the value for 'canDismiss' when using the 'useIonModal' hook?

Issue

I have tried everything i can think of at this point in attempting to achieve a simple modal that requires that the user click a button (confirm or cancel) before the modal can dismiss.

In an Ionic React functional component, i have tried to instantiate a modal for this purpose using the useIonModal hook with the canDismiss property initially set to false with the intent to change canDismiss after the user clicks one of the buttons inside the modal. I have tried changing canDismiss via both local state using the useState hook as well as with global state via a react-redux store among other ways noted below. Nothing i have tried manages to change the value of canDismiss for the modal.

The code inside my functional component:

// I initially set canDismiss to false here
const [canDismiss, setCanDismiss] = useState(false);

const [presentDialog, dismissDialog] = useIonModal(Dialog, {
    // When user clicks a button in the modal, the modalComplete method is called passing its payload to this parent
    modalComplete: (payload) => {modalCompleteHandler(payload)}
});

// this is the method which is executed via the modal which attempts to set canDismiss to true
const modalCompleteHandler = useCallback((payload) => {
  setCanDismiss(() => { return true });
  // do stuff with the payload
}, []);

// i attempt to watch for the change in a useEffect hook and when attempting to dismiss the dialog after the change canDismiss === true, the dialog does NOT dismiss
useEffect(() => {
 if(canDismiss) {
   dismissDialog();
 }
}, [canDismiss, dismissDialog]);

// this is the method that displays the modal with canDismiss set to false via useState hook noted above
const showDialogHandler = useCallback(()=> {
  presentDialog({
   canDismiss: canDismiss,
  });
}, [canDismiss, presentDialog]);

I have tried to change the value for canDismiss with and without a useEffect hook as outlined above by also attempting to dismiss the modal immediately after setting canDismiss to true instead. This also did not work:

setCanDismiss(() => { return true });
dismissDialog();

I have tried using state inside a react-redux store globally for changing the value of canDismiss. This also did not work:

..
presentDialog({
  canDismiss: uiState.modal.canDismiss,
});
...
dispatch(actionsUI.setCanDismiss({canDismiss: true}));

I have tried setting the value for canDismiss to true in the react-redux store from the parent component as well as inside the modal component Dialog prior to calling its modalComplete method with payload. Neither worked.

I have tried storing the value for canDismiss using a simple object with useMemo in the parent component. This also does not work:

const canDismissState = useMemo(() => { return {value: false} },[]);
...
canDismissState.value = true;
dismissDialog();

And lastly, i have tried using a ref which also does not work:

const canDismissRef = useRef({value: false});
...
canDismissRef.current.value = true;
dismissDialog();

Absolutely nothing seems to change the value for canDismiss after the modal is presented using the useIonModal hook. Why?

I do NOT want to stuff a modal in my JSX with the necessary attributes as a solution.

Any help greatly appreciated.

Solution

Setting the value of canDismiss to a function that returns a promise which resolves to true or false is the solution i was looking for.

As an example, here is one possible implementation which uses another ionic hook to achieve the goal:

const [present] = useIonActionSheet();
...
function canDismissFunc() {
    return new Promise<boolean>((resolve, reject) => {
      present({
        header: 'Are you sure?',
        buttons: [
          {
            text: 'Yes',
            role: 'confirm',
          },
          {
            text: 'No',
            role: 'cancel',
          },
        ],
        onWillDismiss: (ev) => {
          if (ev.detail.role === 'confirm') {
            resolve(true);
          } else {
            reject();
          }
        },
      });
    });
}
...
// and when presenting the modal
presentDialog({
  canDismiss: canDismissFunc,
});

Answered By - DevMike