Как отобразить список в компоненте?

Список рендерится через map по массиву данных: каждый элемент превращается в React-элемент, каждому нужен стабильный key.

Базовый вариант

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

• map возвращает массив элементов — React умеет рендерить массивы.
• key — стабильный уникальный среди соседей идентификатор (id из данных). Индекс — только для статичных списков без состояния.
• Если элемент состоит из нескольких узлов без обёртки — <React.Fragment key={id}>.

Обработка краевых случаев

if (isLoading) return <Skeleton />;
if (error) return <ErrorState error={error} />;
if (users.length === 0) return <EmptyState />;

Пустое состояние важно не забывать. Осторожно с {users.length && ...} — при нуле отрендерится «0»; использовать users.length > 0 &&.

Производные данные

Фильтрацию и сортировку делать при рендере (при необходимости — в useMemo), не дублируя результат в state:

const visible = useMemo(
  () => users.filter((u) => u.active).sort(byName),
  [users],
);

Производительность

Элемент списка — отдельный компонент; при больших списках — React.memo на нём и стабильные props (useCallback для колбэков), а при сотнях-тысячах строк — виртуализация (react-window/virtuoso).

Коротко для собеседования

items.map((item) => <Row key={item.id} item={item} />) — массив элементов со стабильным key (не индекс для изменяемых списков). Обработать loading/error/пустой список (осторожно с && и нулём), производные данные считать в useMemo, строку вынести в компонент с memo, при больших объёмах — виртуализация.