【Chakra UI】１つのファイル内で複数のモーダルを開く場合のuseDisclosureの定義方法について

はじめに

Chakura UIにて、1つのファイル内で複数のモーダルを開く場合の実装方法で若干迷ったので展開します。

問題

モーダルを複数開く場合、useDisclosureのhooksからisOpen, onOpen, onCloseプロパティをそれぞれ取得する必要があるが、1つのファイル内で複数のモーダルを開く場合のやり方

useDisclosure（例）

// 編集画面用
const { isOpen, onOpen, onClose } = useDisclosure()
// 削除画面用
const { isOpen, onOpen, onClose } = useDisclosure()

↑のように、複数のuseDisclosureを宣言すると定義が重複する。

解決方法

一旦別名をつける。

useDisclosure（例）

// 編集画面用
const editModal = useDisclosure();
// 削除画面用
const deleteModal = useDisclosure();

使い方:（例）

// 編集画面
<EditModal
 isOpen={editModal.isOpen}
 onClose={editModal.onClose}/>
    
// 削除画面
<DeleteModal
 isOpen={deleteModal.isOpen}
 onClose={deleteModal.onClose}/>

おわりに

簡単に解決するけど割と思いつかないものですね...

参考

JISOUのメンバー募集中🔥

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！👇