Reactにおけるタグ配列のユニークキー

前の例では、以下のようにループを使用して段落を生成していました:

jsxconst res = arr.map(function(item) {
  return <p>{item}</p>;
});

これは機能しますが、コンソールを確認するとエラーが表示されます: Warning: Each child in an array or iterator should have a unique "key" prop. このケースでは、 Reactは、ループ内の各タグに一意の番号を付与することを要求しています。これにより、Reactが後でこれらのタグを操作するのが容易になります。

この番号は、属性 key を使用して追加されます。 この場合、番号として 配列内の要素のインデックス を 使用することができます。 この例では、この番号は変数 index に 格納されているため、修正されたコード行は以下のようになります:

jsxconst res = arr.map(function(item, index) {
  return <p key={index}>{item}</p>;
});

実行してみましょう - コンソールのエラーは消えるはずです:

jsxfunction App() {
  const arr = [1, 2, 3, 4, 5];
  
  const res = arr.map(function(item, index) {
    return <p key={index}>{item}</p>;
  });
  
  return <div>
    {res}
  </div>;
}

もう一度説明します: この属性 key はReactにとって内部的な意味を持ちます。この点についての深い理解は、次のレッスンで得られるでしょう。今のところは、このようなエラーが表示された場合、各タグに対して一意の値を持つ属性 key を追加すれば問題が解決する、と覚えておいてください。