Відображення списків даних у React

Під час розробки сучасних веб-додатків часто виникає необхідність відображати колекції даних, отриманих із бекенду. Для цього використовується метод 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..

Ключ

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

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

Зазвичай рекомендується використовувати ідентифікатори, такі як значення 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 встановлюється на елементі, який буде відображатися кілька разів у масиві даних.