React×TypeScript モーダルウィンドウの作成に関して

Question

前提

React×TypeScriptでモーダルウィンドウを作成しようと思っているのですが、うまく挙動しないのでご教授いただきたいです

ソースコード

buttonをクリックするとshowがtrueになってモーダルが表示される仕組みを実装したいと考えています

export const Header = () => {
  const [show, setShow] = useState(false)
  const openModal = () => {
    setShow(true)
  }

  return (
    <>
      <div>
        <button onClick={openModal}>+</button>
        <Modal show={show} />
      </div>
    </>
  )
}

import { useState } from 'react'
import { Form } from './Form'

export const Modal = (show: any) => {
  console.log(show)

  if (true) {
    return (
      <div>
        <Form />
      </div>
    )
  } else {
    return null
  }
}

発生している問題

実際に確認するとボタンに関係なくモーダルが表示されていて、
consoleでshowを確認するとfalseと出力されていました

試したこと

if (true) {をif (show) {に変更しても同じでした

最後に

初歩的な質問で申し訳ありませんが、ぜひご教授いただけると幸いです
よろしくお願いします

Answer 1

if (true) だと100%真になりませんか？

export const Modal = (props: any) => {

  if (props.show) {

とかじゃないでしょうか

Comments

[kuralie]

ありがとうございます！解決できました