React で Modal Dialog の終了を promise で待って後続の処理を実行する一番手っ取り早そうな方法

const handleDeleteClick = () => {
  const confirmResult = 削除確認ダイアログの表示()
  if (confirmResult === 削除ボタン押された）{
      削除処理する
  }
}

import { Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText, Button } from '@mui/material'

export type MyDialogProps = {
+  onClose: (value: string) => void
  title?: string
  message?: string
}

export function MyDialog(props: MyDialogProps) {
  const { onClose, title, message } = props

  return (
+    <Dialog open onClose={() => onClose('close')}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        <DialogContentText>{message}</DialogContentText>
      </DialogContent>
      <DialogActions>
+        <Button onClick={() => onClose('ok')}>OK</Button>
+        <Button onClick={() => onClose('cancel')} autoFocus>
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  )
}

import React from 'react'
import { MyDialog, MyDialogProps } from './MyDialog'

export function App() {
+  const [modalConfig, setModalConfig] = React.useState<MyDialogProps | undefined>()

  /**
   * 削除ボタンクリック時の処理
   */
  const handleDeleteClick = async () => {
    const ret = await new Promise<string>((resolve) => {
+      setModalConfig({
        onClose: resolve,
        title: '削除します。よろしいですか?',
        message: '削除すると二度と元に戻せません。'
      })
    })
+    setModalConfig(undefined)
    console.log(ret)
    if (ret === 'ok') {
      console.log('削除する:OK時の処理を実行する')
    }
    if (ret === 'cancel') {
      console.log('削除する:Cancel時の処理を実行する')
    }
  }

  /**
   * その他ボタンクリック時の処理
   */
  const handleOtherClick = async () => {
    const ret = await new Promise<string>((resolve) => {
+      setModalConfig({
+        onClose: resolve,
+        title: '何かします。よろしいですか?',
+        message: '何かすると二度と元に戻せません。'
+      })
    })
+    setModalConfig(undefined)
    console.log(ret)
    if (ret === 'ok') {
      console.log('何かする:OK時の処理を実行する')
    }
    if (ret === 'cancel') {
      console.log('何かする:Cancel時の処理を実行する')
    }
  }

  return (
    <div className="App">
      <button type="button" onClick={handleDeleteClick}>
        Delete Confirm
      </button>

      <button type="button" onClick={handleOtherClick}>
        Other Confirm
      </button>

+      {modalConfig && <MyDialog {...modalConfig} />}
    </div>
  )
}