useStateとChakraUlを使って削除するときにAlertDialogを出しながらリッチに削除する

reactで値を削除するときにChakra-uiのalert dialogで削除の確認を出してから削除するというのがuiもリッチに削除しつつあまり処理も複雑ではなかったので紹介します。

処理の流れ

ユーザーが削除したい値の削除ボタンを押す
↓
handleClickDeleteが発火してその値のidをステートに保持、同時にalert dialogを表示する
↓
alert dialogが表示され、削除の確認
↓
削除ボタンが押されるとonClickDeleteが発火
↓
削除

具体的な処理

以下をインポートしてください。
内容はchakraUI公式から持ってきています。

import { 
    AlertDialog,
    AlertDialogBody,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogContent,
    AlertDialogOverlay,
    AlertDialogCloseButton,
    useDisclosure,
    Button,} from "@chakra-ui/react"

またstateなどは以下にしてください。
ちなみにこれはOpenの判定とキャンセルするときにキャンセルボタンにフォーカスが当たるようにするためのものです。

//削除ボタンの管理
const { isOpen, onOpen, onClose } = useDisclosure();
const cancelRef = React.useRef<HTMLButtonElement>(null);

//削除ボタンを押したときにクエリパラメータを保持するためのステート
const [selectId,setSelectId] = useState<number | null>();

またAlert Dialogの内容は以下にしてください。
削除ボタンを押した際にonClickDeleteを発火させるようにしています。
こちらも公式の内容を若干変更しているのみです。

<AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
              削除の確認
            </AlertDialogHeader>

            <AlertDialogBody>
              本当に削除しますか？
            </AlertDialogBody>

            <AlertDialogFooter>
              <Button ref={cancelRef} onClick={onClose}>
                キャンセル
              </Button>
              <Button colorScheme='red' onClick={onClickDelete} ml={3}>
                削除
              </Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>

以下からその流れを書いていきます。
ページ内に削除ボタンを作成するとして、そのときにすぐonClickDeleteを発火させるのではなく、handleClickDeleteを発火させるようにしてください。
またそのときにidを渡すようにします。(例としてuser)

~中略~
<Button onClick={()=>handleClickDelete(user.id)}>削除</Button>

handleClickDeleteの処理としては以下としてください。
このときにstateに押された時のidを割り振って保持するようにして、onOpen()を呼びます。

const handleClickDelete = (id:number)=>{
     setSelectId(id)
    onOpen()
}

そうすると、ChakraUIが提供しているuseDisclosure()で開いているかを判定してモーダルを開くようになるので、先ほどのAlert Dialogが表示されます。

<AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
      >

開いたときに削除するボタンを押すことでonClickDeleteが発火します。

const onClickDelete = async()=>{
    if (selectId !== null) {
        try {
          const response = await fetch(`/user/${selectId}`, {
            method: "DELETE",
          });
          
          if (response.ok) {
            setUsers(users.filter((user) => user.id !== selectId));
            onClose(); // ダイアログを閉じる
          } else {
            console.error("削除に失敗しました");
          }
        } catch (error) {
          console.error( error);
        }
      }
    }

処理としてはselectIdがあるときにクエリパラメータで所得したidのuserを削除して、responseが返ってきたときにそのuserのid以外を残してfilterします。
ちなみにこのfilterという関数はtrueが返ってきた値のみを残して新しく配列を作るメソッドです。
そしてその後にonClose()でモーダルを閉じます。

この流れで削除するときにAlert　Dialogを出しながら確認し削除するという流れを実装することができます。

読んでいただきありがとうございます。
何か間違いがありましたら指摘していただけると嬉しいです。