Списки рендерят через array.map(): items.map(item => <li key={item.id}>{item.name}</li>). key должен быть стабильным и уникальным среди соседей.
Индекс как key — только если список статичен и не переупорядочивается. Без key React хуже сопоставляет элементы при обновлении.
Фильтрация: items.filter(...).map(...). Пустой список — отдельная ветка UI.
{products.map((p) => (
<ProductCard key={p.id} product={p} />
))}{items
.filter((i) => i.active)
.map((i) => <span key={i.id}>{i.label}</span>)}Книга, игра и упражнения доступны без регистрации. Видеоуроки — после оплаты курса.