Під час розробки сучасних веб-додатків часто виникає необхідність відображати колекції даних, отриманих із бекенду. Для цього використовується метод map(). Усередині методу map() застосовується функція зворотного виклику, яка повертає JSX для відображення потрібного результату.

Розглянемо приклад для ілюстрації роботи цього підходу. Маємо компонент App, який передає проп toys, масив об'єктів. Компонент ToyCard використовує метод map() для відображення кожної іграшки з масиву.

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

На рядках 13-15 спостерігається використання методу map(). Він дозволяє ітеруватися по кожному елементу масиву, отримувати його значення та генерувати відповідну розмітку на основі даних кожного елемента.

Повний код застосунку:

Однак, якщо звернути увагу на консоль, можна побачити попередження: Each child in a list should have a unique "key" prop..

Ключ

Ключ — це важлива строкова властивість, яку необхідно призначати при створенні елементів у колекції.

React використовує ключі для забезпечення стабільної ідентичності елементів у колекції. Ключі дозволяють React визначати, які елементи потрібно повторно відрендерити або створити заново при змінах, замість того щоб перегенерувати всю колекцію. Використання ключів запобігає зайвому створенню елементів, що підвищує продуктивність.

Note

Ключ має бути унікальним серед сусідніх елементів. Він повинен залишатися незмінним з часом.

Зазвичай рекомендується використовувати ідентифікатори, такі як значення id з бекенд-даних, як властивість key. Такий підхід дозволяє React ефективно ідентифікувати та керувати окремими елементами у колекції.

Виправимо наш попередній застосунок, використовуючи властивість key для елементів:

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li key={toy.id}>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Рядок 14: властивість key встановлюється на елементі, який буде відображатися кілька разів у масиві даних.

Повний код застосунку: