質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

Chakra UIのmodalが開かない

yuki96
yuki96

総合スコア26

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0グッド

0クリップ

136閲覧

投稿2022/09/23 03:49

使用しているバージョン 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
※不足情報あればご指摘ください

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

自己解決

自作のボタン内にprops渡せていませんでした。。

投稿2022/09/24 02:35

yuki96

総合スコア26

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。