Chakra UI のモーダル実装でハマったエラーと解決方法

はじめに

React × Chakra UI でモーダルを実装したときの、実際に起きたエラーとその解決方法を整理します。

問題

モーダルを実装した際に以下のエラーが発生しました。

1. Modal コンポーネントをVStackの外に書いてしまい、JSX構造エラーが出た。

解決方法

1.Modalの配置を修正

誤ってVStackの外に書いていたのでエラーになっていました。
モーダルも同じ JSX 構造の中に含めるように修正。

return (
  <VStack spacing={6} mt={6}>
    <Heading>サンプルアプリ</Heading>

    <Button onClick={onOpen} colorScheme="blue">
      モーダルを開く
    </Button>

    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>サンプルモーダル</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <Text>ここにフォームや内容を入れる</Text>
        </ModalBody>
        <ModalFooter>
          <Button variant="ghost" onClick={onClose}>
            閉じる
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  </VStack>
)

---

おわりに

モーダルは VStack 内に配置する（JSX の構造を守る）

useDisclosure はオブジェクト分割代入で使う