React | 配列表示：map と key を理解してリストUIを作る – 10/12

Reactで実用アプリを作ると必ず出てくるのが「配列→一覧表示」です。ここでは map と key の意味を理解し、削除・フィルタへつなげます。

mapでリストを表示する

配列を表示する基本は map です。

const items = ["Apple", "Orange", "Banana"]

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

JSXの中で { ... } を使って配列から要素を生成しています。

Reactはリストの差分更新を効率化するために key を使います。keyは「各要素を一意に識別できる値」が望ましいです。

実際はオブジェクト配列が多いです。

const users = [
  { id: 1, name: "Taro" },
  { id: 2, name: "Hanako" },
]

<ul>
  {users.map((u) => (
    <li key={u.id}>{u.name}</li>
  ))}
</ul>

filter と組み合わせると検索の基本が作れます。

const visible = users.filter((u) => u.name.includes(keyword))

この visible を map すれば、絞り込んだ一覧が表示できます。