特定の条件による分岐

もし、 itemsが空の場合に、メッセージを表示したいとします。以下のように、3項演算子を使うことで、特定の条件によって、表示を変えることができます。

BreadCrumb.tsx◎

...
      <p>パンくずリスト</p>
      {items.length === 0 ? (
        <p>itemがありません。</p>
      ) : (
        <p>itemが{items.length}あります</p>
      )}
...

上記にてconst items = []とすると、以下のように表示されます。

また、trueになる場合のみ表示したい場合は、 &&の演算子を使うことで簡略に記述することができます。&&は左側がtrueの場合に、右側が実行されるため、右側の要素が表示されます。

{items.length === 0 && (<p>itemがありません。</p>)}