Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Завдання: Відображення Колекцій Даних у React | Основи React та Компонентно-Орієнтованого Інтерфейсу Користувача
React Mastery

bookЗавдання: Відображення Колекцій Даних у React

Завдання: Відобразити список товарів

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

Завдання:

  • Використати метод map() для рендерингу масиву товарів.
  • Обов'язково заповнити необхідні поля:
  1. h2 має містити назву товару (name);
  2. p має містити опис товару (description);
  3. span має містити рядок "Price:" та ціну товару (price).
  1. Використайте метод map() для ітерації по масиву props.goods.
  2. Обов'язково встановіть проп key елемента <li> унікальним значенням, наприклад, властивістю id елемента.
  3. Усередині кожного елемента <li> використовуйте такі елементи:
    • Елемент <h2> для відображення назви товару. Доступ до назви через поточний item;
    • Елемент <p> для відображення опису товару. Доступ до опису через поточний item;
    • Елемент <span> для відображення рядка "Price:" та ціни товару. Доступ до ціни через поточний item.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 15

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain how to use the map() method in this context?

What should I do if some goods are missing a description or price?

Can you show an example of how the rendered list should look?

Awesome!

Completion rate improved to 2.17

bookЗавдання: Відображення Колекцій Даних у React

Свайпніть щоб показати меню

Завдання: Відобразити список товарів

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

Завдання:

  • Використати метод map() для рендерингу масиву товарів.
  • Обов'язково заповнити необхідні поля:
  1. h2 має містити назву товару (name);
  2. p має містити опис товару (description);
  3. span має містити рядок "Price:" та ціну товару (price).
  1. Використайте метод map() для ітерації по масиву props.goods.
  2. Обов'язково встановіть проп key елемента <li> унікальним значенням, наприклад, властивістю id елемента.
  3. Усередині кожного елемента <li> використовуйте такі елементи:
    • Елемент <h2> для відображення назви товару. Доступ до назви через поточний item;
    • Елемент <p> для відображення опису товару. Доступ до опису через поточний item;
    • Елемент <span> для відображення рядка "Price:" та ціни товару. Доступ до ціни через поточний item.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 15
some-alt