reactでkeyを指定したのにエラーが消えないときの回避策 #React

はじめに

みんな嫌いな↓のエラー。

Each child in a list should have a unique "key" prop.

「はいはいkey指定すれば良いんでしょ」と思ったのに、エラーが消えない❗
エラーが出るコードは↓。

  {arrays.map((element) => (
    <>
      <div key={`${element}1`}>ほげ</div>
      <div key={`${element}2`}>ふが</div>
    </>
  ))}

↓のようにすればよい。あ、 Fragment はちゃんと import してね。

  {arrays.map((element) => (
    <Fragment key={element}>
      <div>ほげ</div>
      <div>ふが</div>
    </Fragment>
  ))}

React公式docの↓の記述が該当するかな。

Keys used within arrays should be unique among their siblings.

で、ここで疑問なのが最上位の要素...っぽい <> ってそもそもなんなの❓ってこと。

これはShort Syntaxで、正式には Fragments というらしい。
公式docはこちら。

A common pattern in React is for a component to return multiple elements.

CSS gridを使ってるときなど、複数の要素を div で囲まずにﾀﾞﾗｰっと並べたいときによく使う。

混乱しやすいのは、reactのツリー構造とreactが吐くHTMLのツリー構造が違うこと。
Reactでは

のようになっているが、HTMLは

のようになっている。
ここで、keyを指定すべき最上位要素とはreactのツリー構造で考えなくてはならない。
よって、 div 要素じゃなく　Fragment 要素に key を指定する必要があるってわけ。

なお、 <> 記法のときは key が指定できないとのこと。なぜ😭

You can use <> </> the same way you’d use any other element except that it doesn’t support keys or attributes.