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

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

const 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 に格納されているため、修正されたコード行は以下のようになります:

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

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

function 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 を追加すれば問題が解決する、と覚えておいてください。

キー key は、このループ内でのみ一意である必要があります。別のループ内の key の値は、他のループの値と一致しても構いません。

前述の内容に従って、前のタスクの解答を修正してください。