空状態

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

0件を比較で判定する

件数をそのまま論理積の左に置くと、0件のとき画面に0という文字が出ます。比較にすれば真偽値になり、事故が起きません。

件数をそのまま置く

{works.length && (
  <p>作品があります</p>
)}

比較で出し分ける

{works.length === 0 ? (
  <p className="empty-message">
    まだ作品がありません
  </p>
) : (
  works.map((work) => ...)
)}

1 / 6

← → キーでも送れます