リスト表示

map と key でリストを作る

ポイント

配列を画面に並べるときは map を使う。配列の1つずつに、同じ形の JSX を当てはめる
map で並べる一番外側の要素には、全部ちがう key（名札）を付ける
key には、id など「その項目だけの値」を使う。配列の番号（index）は、並び替えや削除でずれるので避ける

試してみよう

const fruits = [
  { id: 1, name: "りんご", price: 150 },
  { id: 2, name: "バナナ", price: 100 },
  { id: 3, name: "みかん", price: 80 },
]

export default function App() {
  return (
    <ul style={{ padding: 16 }}>
      {fruits.map((fruit) => (
        <li key={fruit.id}>
          {fruit.name}：{fruit.price}円
        </li>
      ))}
    </ul>
  )
}

Open Sandbox

配列に「ぶどう」を足してみよう（画面にも自動で増える）
値段が 100円以上のものだけ表示してみよう（ヒント：map の前に filter）
key={fruit.id} を消すと、Console に何が出るか見てみよう

つまずきポイント

key は「一番外側」に付ける

map が返す一番外側の要素に key を付ける。<Link> で <Card> を包んだら、key は <Link> に付ける。

key は全部ちがう値にする

同じ値（例：全部「第1部」）だと、React がどれがどれか見分けられない。id や slug など、その項目だけの値を使う。