ChakraUI を使って 単一コンポーネント内に複数モーダルを組み込もうとしたら詰まった件

はじめに

みなさん、こんにちは。torihaziです

現在、Rails 7 x React 18　x ChakraUIを使用して Xクローンを作成しています。

そこでタイトルのことをやろうとしたら詰まったので、その解決策的なものを書き残そうと思います。

現状

まず目指していたものはXのPCから開ける画面のこれです。

このとき "アカウント作成"を押したらこんなモーダルが、

"ログイン"を押したら別のモーダルが出ると思います

これをやろうとしてました。

そのため、コードは抜粋ではありますが、次のようなイメージをやっていました。

Home.jsx

const Home = () => {
・・・
const {isOpen, onOpen, onClose } = useDisclosure();
・・・・・
return (
    <>
        <Button onClick={onOpen}>アカウントを作成</Button>
        <Button onClick={onOpen}>ログイン</Button>

        <Modal isOpen={isOpen} onClose={onClose}>
            アカウント登録のやつ
        </Modal> 
        <Modal isOpen={isOpen} onClose={onClose}>
            ログインのやつ
        </Modal> 

    </>
    )
}

そしてアカウント作成かログイン、どっちか押したらそれに応じたモーダルが開くイメージです。

自分の場合は登録の方を押してもログインの方が出てしまってました。

解決

別々に作ればいい、です。
アカウント作成はアカウント作成で作って、ログインはログインで作ります。

const Home = () => {
・・・
  const {
    isOpen: isSignUpOpen,
    onOpen: onSignUpOpen,
    onClose: onSignUpClose,
  } = useDisclosure();
  const {
    isOpen: isSignInOpen,
    onOpen: onSignInOpen,
    onClose: onSignInClose,
  } = useDisclosure();
・・・・・
return (
    <>
        <Button onClick={onSignUpOpen}>アカウントを作成</Button>
        <Button onClick={onSignInOpen}>ログイン</Button>

        <Modal isOpen={isSignUpOpen} onClose={onSignUpClose}>
            アカウント登録のやつ
        </Modal> 
        <Modal isOpen={isSignInOpen} onClose={onSignInClose}>
            ログインのやつ
        </Modal> 

    </>
    )
}

あとちなみに以下のようにやっている人もいました。

  const modal1 = useDisclosure();
  const modal2 = useDisclosure();

使うときは modal1.isOpenをpropsに渡すイメージです。
好みですか。

終わりに

色々ありましたが、無事出ました。
以下は現在作成中のものです。

完全な模倣とまではいかないかもしれませんが、満足の出来です。

ということで続きやります。

参照