Списки рендерят методом map: каждый элемент массива превращают в элемент разметки:
function TodoList({ todos }) { return ( <ul> {todos.map((todo) => ( <li key={todo.id}>{todo.text}</li> ))} </ul> ); }
Каждому элементу списка обязательно дают уникальный key — обычно это id из данных. Ключ помогает React понимать, какой элемент изменился, добавился или удалился, и не перерисовывать список целиком.
Важно: не используйте индекс массива как ключ, если список меняется (элементы добавляются, удаляются, сортируются) — это приводит к ошибкам. Берите стабильный идентификатор.
Комбинируя filter и map, легко показывать отфильтрованные данные:
{users.filter((u) => u.active).map((u) => ( <Card key={u.id} name={u.name} /> ))}