JSXにおける&&演算子の使用

条件が真の場合にテキストを挿入し、 偽の場合は何もしない必要性が生じることがあります。 これは&&演算子を使用して行います。

例を見てその動作を確認しましょう。 次のコードでは、showが trueの場合、テキストを含む段落が挿入され、 falseの場合は何も挿入されません:

jsxfunction App() {
  const show = true;
  
  return <div>
    {show && <p>text</p>}
  </div>;
}

jsxfunction App() {
  const isAuth = true;
  
  return <div>
    <p>認証済みです</p>
  </div>;
}