配列をmapで並べる　一覧表示とkey

前の章のApp、カードが3枚でした。もしこれが30枚だったら? <ProductCard ... /> を30行書くのでしょうか。実務のデータは配列でやってきます(APIから届く商品リスト、ユーザー一覧)。配列を、そのままカードの並びに変換する——チャプター2で仕込んだmapが、ついに本役で登場します。

データの配列 → 部品の配列

type User = {
  id: number;
  name: string;
};

const users: User[] = [
  { id: 1, name: "太郎" },
  { id: 2, name: "花子" },
  { id: 3, name: "次郎" },
];

const UserList = () => {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

読み解きます。{ } の窓(Ch8)の中で、users.map(...) が動いています。チャプター2の言葉で言えば、材料は「データの配列」、加工機械は「データを受け取ってタグを返すアロー関数」、出てくるのは「タグの配列」。Reactはタグの配列を渡されると、順番に全部表示してくれます。

「データの配列を、表示の配列に変換する」——チャプター2で「Reactの一覧表示はまさにこれをやる」と予告した、その現物です。

keyという名札

mapの中のタグに、見慣れない属性がついています。key={user.id}。これはReactが要素を見分けるための名札です。