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

Отображение массива элементов в React

Отображение списков — одна из самых частых задач в React разработке. Основной способ — использовать метод map() для преобразования массива в массив JSX элементов.

Базовый пример

function UserList() {
  const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 3, name: "Charlie" }
  ];

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

Важность ключа (key)

Атрибут key критичен для производительности и корректности React. Он помогает React идентифицировать какие элементы изменились, добавились или удалились. Используй уникальный идентификатор из данных, а не индекс массива (индекс может измениться при перестановке элементов).

// ❌ Плохо - индекс как ключ
{items.map((item, index) => <div key={index}>{item}</div>)}

// ✅ Хорошо - уникальный ID
{items.map(item => <div key={item.id}>{item.name}</div>)}

Сложные структуры

Для более сложных списков с фильтрацией, сортировкой или обработкой ошибок:

function ProductList({ products = [] }) {
  if (!products.length) {
    return <p>No products found</p>;
  }

  return (
    <div className="grid gap-4">
      {products.map(product => (
        <div key={product.id} className="card">
          <h3>{product.name}</h3>
          <p>${product.price}</p>
          <button>Add to cart</button>
        </div>
      ))}
    </div>
  );
}

Вложенные списки

function Categories() {
  const data = [
    {
      id: 1,
      name: "Electronics",
      items: ["Laptop", "Phone", "Tablet"]
    }
  ];

  return (
    <div>
      {data.map(category => (
        <div key={category.id}>
          <h2>{category.name}</h2>
          <ul>
            {category.items.map((item, idx) => (
              <li key={`${category.id}-${idx}`}>{item}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

Лучшие практики

1. Всегда используй key — это предотвращает баги с состоянием форм
2. Фильтруй перед map() — для производительности
3. Выноси элемент в отдельный компонент — если структура сложная
4. Избегай map() внутри JSX для простых случаев — это затрудняет отладку

Отображение массивов в React просто, но требует понимания механизма ключей и производительности.