Implementați un component pentru afișarea unei liste de echipe cu participanții. Se primește un array de echipe (cu nume și listă de ID-uri de utilizatori participanți) și un array separat de utilizatori (cu ID și nume). Este necesar să asociați echipele cu utilizatorii după ID și să afișați cardurile echipelor cu lista de participanți. Dacă nu există participanți — afișați 'fără participanți'; dacă ID-ul utilizatorului există, dar utilizatorul nu este găsit în listă — afișați o linie. Caracteristică: ID-ul utilizatorului poate veni sub formă de array, număr, null sau 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 есть, но пользователя нет в списке — выводим "-".
• Выводим карточки команд с перечислением участников.