key

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

keyはどこに付けるか

map が返す一番外側の要素に、key を付けます。

keyが無い

{works.map((work) => (
  <div className="work-card">
    <h2>{work.title}</h2>
  </div>
))}

keyを付ける

{works.map((work) => (
  <div className="work-card"
    key={work.id}>
    <h2>{work.title}</h2>
  </div>
))}

中の h2 に付けても警告は消えません。

1 / 6

← → キーでも送れます