使用しているバージョン react18.2.0
Chakra UI/modalを使ってモーダルウィンドウを作成しています
公式ドキュメントのコードを参考に、ボタンだけ自作のコンポーネントに置き換えて実装したのですが
ボタンをクリックしても何も表示されません
コードのどこに間違いがあるのかご指摘いただけないでしょうか
実現したいこと
Chakra UIのmodalを利用してモーダルウィンドウを実装したい
該当のソースコード
Github:https://github.com/yuki96422/react-todo/tree/main/react_todo
TaskList.jsx
import {Heading, VStack, Box} from '@chakra-ui/react'; import TaskCard from '../taskcard/Taskcard'; import AddTaskModal from "../modal/AddTaskModal"; const TaskList = () => { return ( <> <Box p={10}> <Heading as="h1" color="gray.600" fontSize="32px"> Task List </Heading> <VStack spacing="10px" alignItems="start" p="20px"> <TaskCard /> </VStack> </Box> <AddTaskModal /> </> ); }; export default TaskList;
AddTaskModal.jsx
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton, useDisclosure, } from '@chakra-ui/react'; import MainButton from "../button/MainButton" import AddTaskButton from '../button/AddTaskButton'; const AddTaskModal = () => { const { isOpen, onOpen, onClose } = useDisclosure(); return ( <> <AddTaskButton onClick={onOpen} /> <Modal isOpen={isOpen} onClose={onClose}> <ModalOverlay /> <ModalContent> <ModalHeader>Modal Title</ModalHeader> <ModalCloseButton /> <ModalBody> aaaaaa </ModalBody> <ModalFooter> <MainButton colorScheme="blue" mr={3} onClick={onClose}> Close </MainButton> </ModalFooter> </ModalContent> </Modal> </> ); }; export default AddTaskModal;
試したこと
npm install react-use-disclosureを実行
バージョンの違いでエラー
参考記事をいくつか見ましたが、事前にnpmで install react-use-disclosureを実行の指示がなかったので
別要因かと思い、一旦installをやめています(←これが問題ですかね。。)
補足情報(FW/ツールのバージョンなど)
OS:mac
React:18.2.0
ChakraUI:2.3.4
※不足情報あればご指摘ください

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。