前提
React×TypeScriptでモーダルウィンドウを作成しようと思っているのですが、うまく挙動しないのでご教授いただきたいです
ソースコード
buttonをクリックするとshowがtrueになってモーダルが表示される仕組みを実装したいと考えています
Header.tsx
1export const Header = () => { 2 const [show, setShow] = useState(false) 3 const openModal = () => { 4 setShow(true) 5 } 6 7 return ( 8 <> 9 <div> 10 <button onClick={openModal}>+</button> 11 <Modal show={show} /> 12 </div> 13 </> 14 ) 15}
Modal.tsx
1import { useState } from 'react' 2import { Form } from './Form' 3 4export const Modal = (show: any) => { 5 console.log(show) 6 7 if (true) { 8 return ( 9 <div> 10 <Form /> 11 </div> 12 ) 13 } else { 14 return null 15 } 16}
発生している問題
実際に確認するとボタンに関係なくモーダルが表示されていて、
consoleでshowを確認するとfalseと出力されていました
試したこと
if (true) {
をif (show) {
に変更しても同じでした
最後に
初歩的な質問で申し訳ありませんが、ぜひご教授いただけると幸いです
よろしくお願いします
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/01/10 14:43