Рендеринг Набору Даних

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

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

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

Повний код програми:

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

Key

Ключ (Key) є важливим рядковим пропом, який необхідно присвоювати при створенні елементів у колекції.

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

Примітка

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

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

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

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

Повний код програми: