Implementujte komponentu pro zobrazení seznamu týmů s účastníky. Přijímá pole týmů (s názvem a seznamem ID uživatelů účastníků) a samostatné pole uživatelů (s ID a jménem). Je třeba spojit týmy s uživateli podle ID a zobrazit karty týmů s výčtem účastníků. Pokud účastníků není — zobrazit 'žádní účastníci'; pokud je ID uživatele, ale uživatel není nalezen v seznamu — zobrazit pomlčku. Vlastnost: ID uživatele může přijít ve formě pole, čísla, null nebo undefined.

Ниже пример реализации React-компонента, который принимает массив команд и пользователей, сопоставляет участников по ID и выводит карточки с участниками:

import React from 'react';

function TeamList({ teams, users }) {
  // Создаём словарь пользователей по ID для быстрого поиска
  const userMap = React.useMemo(() => {
    const map = new Map();
    users.forEach(user => {
      map.set(user.id, user.name);
    });
    return map;
  }, [users]);

  // Функция для получения списка имён участников команды
  const getParticipantNames = (userIds) => {
    if (!userIds) return ['нет участников'];

    // Приводим userIds к массиву
    let ids = [];
    if (Array.isArray(userIds)) {
      ids = userIds;
    } else if (typeof userIds === 'number') {
      ids = [userIds];
    } else {
      return ['нет участников'];
    }

    if (ids.length === 0) return ['нет участников'];

    return ids.map(id => {
      if (id === null || id === undefined) return '-';
      return userMap.has(id) ? userMap.get(id) : '-';
    });
  };

  return (
    <div>
      {teams.map(team => (
        <div key={team.name} style={{border: '1px solid #ccc', margin: '10px', padding: '10px'}}>
          <h3>{team.name}</h3>
          <ul>
            {getParticipantNames(team.userIds).map((name, idx) => (
              <li key={idx}>{name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default TeamList;

Объяснение:

• Создаём карту пользователей для быстрого поиска имени по ID.
• Обрабатываем userIds, учитывая, что это может быть массив, число, null или undefined.
• Если участников нет, выводим "нет участников".
• Если ID есть, но пользователя нет в списке — выводим "-".
• Выводим карточки команд с перечислением участников.