React boolean型のprops、trueの時は=trueを省略できる

🤗 いきなり具体例

MyComponent.tsx

interface MyComponentProps {
  title: string;
  isBannerShown: boolean;
}

export default function ({title, isBannerShown}: MyComponentProps){

 もろもろ省略

return (
  <Text>{title}</Text>
  
  <div>
    {isBannerShown && <Banner/>} // isBannerShownがtrueの時だけバナーがでる
    <p>.....略
  </div>

);

}

index.tsx

　 もろもろ省略

return (
  <MyComponent title="Hello World" isBannerShown />
);

と

index.tsx

　 もろもろ省略

return (
  <MyComponent title="Hello World"  isBannerShown={true} />
);

は同じ意味になります。

🤗 自分の失敗談

フロントエンドの人にはよくあると思うのですが、
キャンペーンバナーを差し替えるというタスクがありました。

isBannerShownで制御しているのはすぐわかったのですが、
その次に、isBannerShownをどこで制御しているのかわからないという問題にハマりました😑

※追記このコメントまちがえています。勘違いして理解していました。
オプショナルのpropsであってもboolean型のpropsがtrueの場合は省略できる、というReactの仕様をわかってなかったためです！

propsを渡すとき、isBannerShown``isBannerShown=trueが同じ意味です。

こういった小さな勘違いで無駄な時間をとってしまったことを反省しつつ、
学びをシェアしたのでプラマイゼロってことにしたいとおもいます！

追記　さらなる失敗談😇

最初に投稿したときまちがった情報を掲載しておりました〜

自分のまちがえていた箇所😇

• interfaceで定義しているProps名と、関数に引数定義しているProps名を同一にしていませんでした💦
• propsを渡していないので、propsはundefinedとなり、isBannerShownはfalseとなってしまう書き方をしてました（以下のコードの＜修正前＞）。isBannerShownがtrueと同義と書いていてましたが大嘘でした💦

// 修正前
-  <MyComponent title="Hello World" /> // isBannerShownはundefined

// 修正後
+  <MyComponent title="Hello World" isBannerShown />

@kaminalyさんにご指摘いただきました。
ありがとうございます🙏🏻