リスト表示とkey
なぜ学ぶか： 投稿リスト・商品一覧など、一覧画面はWebアプリの主役です。AIのコードでは必ず「配列をmapで並べる」形で登場し、そこにkeyという謎の属性が付いています。まずは形を見てください。
まずはこの例を見てみましょう
const todos = [
{ id: "t1", title: "牛乳を買う" },
{ id: "t2", title: "React を学ぶ" },
];
// データの配列を、画面の部品の配列に「変換」する
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>map（前にやった「全部を変換」）で、データの配列 → 画面部品の配列に変えています。keyはデータ固有のidを渡します。
一覧表示＝配列をmapで並べる
例のように「todosの各要素を、liタグに変換する」と読みます。一覧画面はほぼこの形です。
key＝要素を見分ける名札
Reactが「どの行がどれか」を識別するための名札です。並べ替えや削除のとき、どの行を動かすかの判断に使われます。
keyにはデータ固有のidを使う
例のkey={todo.id}が正解の形。並び順の番号（index）を入れると、並べ替えや削除のときに表示が乱れます。AIがやりがちな手抜きです。
ステップ 1 / 3
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。