配列を map で一覧に変換する(key の役割)

データの配列を、そのまま画面のリストにする

実務の画面は「サーバーから届いた配列を並べて表示する」ものだらけです。商品一覧、コメント一覧、通知一覧、どれも中身は配列です。React では、この配列を JavaScript の map で JSX の要素の配列に変換して、そのまま画面に置きます。Day3 で学んだ JS の map が、ここでそのまま生きます。

const fruits = ["りんご", "みかん", "ぶどう"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li>{fruit}</li>
      ))}
    </ul>
  );
}

ポイントは、map が返すのが「JSX 要素の配列」だということです。React は配列を渡されると、その中身を順番に並べて描画してくれます。だから for 文で組み立てる必要はなく、map の結果を波かっこ {} でそのまま埋め込むだけで一覧になります。

ただし、上のコードを動かすと React が警告を出します。「リストの各項目には key が必要です」というものです。map で作った各要素には、どれがどれかを見分けるための目印 key を付ける決まりになっています。

const users = [
  { id: 1, name: "佐藤" },
  { id: 2, name: "鈴木" },
];

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

{items.map((item, index) => (
  <li key={index}>{item.name}</li>
))}

{items.map((item) => (
  <li key={item.id}>{item.name}</li>
))}

• 配列 → map で JSX 要素の配列に変換 → {} で埋め込むと一覧になる
• map で作った各要素には key を付ける(React の決まり)
• key には id のような一意で不変な値を使う。index は避ける
• key は React が項目を照合するための目印であって、画面には表示されない