[React]mapメソッドについてお勉強になった話

こんにちは。浅野です。
2022年最初の投稿です。
早いもので、今年も4分の1が終わってしまいました、、、
恐ろしいスピードです、、、

さて最近、業務でReactを扱うようになりました。
そこで今回は、最近出くわしたエラーとその解決方法を紹介します。

まずは、こんなコードを書きました。

const items = [
  { name: "name1", description: "description1" },
  { name: "name2", description: "description2" }
];

export function Hoge() {
  return (
    <dl>
      {items.map((item, index) => (
        <>
          <dt>{item.name}</dt>
          <dd>{item.description}</dd>
        </>    
      ))}
    </dl>
  );
}

すると、以下のエラーメッセージが出ました。

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

Reactでmapメソッドを使う際、一意となる値をkeyとして渡さないといけません。
今回dtタグにkeyを渡しているのでOKと思ったのですが、ダメでした。
keyは、mapメソッドでreturnする親要素につけてあげる必要があったのです。
かといって、dtタグとddタグをラップするdivタグを増やすのは、HTMLの構造として適切ではありませんし、場合によってはレイアウト崩れが起きてしまいます。

というところで、解決策は以下でした。

export function Hoge() {
  return (
    <dl>
      {items.map((item, index) => (
        <React.Fragment key={index}>
          <dt>{item.name}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>    
      ))}
    </dl>
  );

<React.Fragment>にkeyを持たせてあげればいいのでした。
普段は省略記法である<></>を使用しても問題はないのですが、
こういうケースでは、省略できないようです。

Reactの公式サイトでも、まさに今回のケースが紹介されていました。

<></>は他の要素と同じように使うことが可能ですが、key や属性のサポートはありません。
(中略)
明示的に<React.Fragment>と宣言したフラグメントでは key を持つことができます。これはコレクションをフラグメントの配列に変換するときに有用です。たとえば定義リストを作成する時に利用します：

またひとつ賢くなりました。
この記事が誰かのエラー回避に繋がれば幸いです!