条件レンダリング(&&)

Reactで状態・フォーム・リストを扱う / 全 6 枚

出さないだけなら

出すか出さないかの1択には、三項演算子で null を書くより論理積のほうが素直です。

三項演算子 + null

{work.year >= 2026
  ? <span className="badge-new">NEW</span>
  : null}

論理積だけで書く

{work.year >= 2026 &&
  <span className="badge-new">NEW</span>}

右にJSXを1つ置くだけで、左が偽のときは何も描かれません。

1 / 6

← → キーでも送れます