Zenn
🗂

【React】Warning: Each child in a list should have a unique "key"

2022/04/06に公開
React
tech

エラーになったコード

// jsx部分
return (
  // 省略
  {values.map((value, index) => {
    return (
      <>
        <ChildComponent value={value} key={index} />
      </>
    )
  })}
  // 省略
)

エラーが出なかったコード

// jsx部分
return (
  // 省略
  {values.map((value, index) => {
    return <ChildComponent value={value} key={index} />
  })}
  // 省略
)

原因など

結局公式記載の通りに書いていなかったことが原因。

ちょっとわかりにくいんですが、
一番外側？の部分にkeyをつけないといけない。
しかし <ChildComponent /> を <></> で囲ってしまっていた。

ReactはRoRなんかと比べるとトレシュー記事少ないが、
基本、入門記事読んでわからない＝おかしな事してるって嗅覚になってれば、
大体問題なさそう。

参考サイト

https://reactjs.org/docs/lists-and-keys.html#keys

Discussion