Глава 13. Списки, ключи и рендер коллекций

Зачем эта глава

Большинство интерфейсов — это списки: товары, посты, сообщения. Нужно уметь выводить массивы в JSX.

Списки создаются через метод map.

Каждому элементу нужен уникальный key, чтобы React правильно обновлял список.

JSX

const users = ["Аня", "Борис", "Саша"];

<ul>
  {users.map((user) => (
    <li key={user}>{user}</li>
  ))}
</ul>

Важно: не используй индекс массива как key, если список может изменяться.

Ты знаешь, как рендерить список и зачем нужны keys.

Цель: список товаров.

Требования: массив товаров с id, названием и ценой.

Критерий готовности: товары выводятся без ошибок и с корректными key.