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

bookЗавдання: Реалізація Умовного Рендерингу – Банківське Сповіщення

Завдання: Створення банківського сповіщення

Працюємо з банківським рахунком. Мета — розробити логіку, яка інформує користувача, чи достатньо коштів на його картці для оплати певної суми. Залежно від результату, користувачеві буде показано різні повідомлення.

Завдання:

  • Створити два компоненти — App (батьківський) та Message (дочірній).
  • Батьківський компонент (App) передає пропси moneyAvailable, price та name.
  1. moneyAvailable — сума грошей, яка є у користувача;
  2. price — сума, яку потрібно сплатити;
  3. name — ім'я користувача.
  • Якщо у користувача достатньо коштів для оплати, показати повідомлення: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
  • Якщо у користувача недостатньо коштів для оплати, показати повідомлення: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.
  1. У React для реалізації логіки оператора condition ? ... : ... використовується тернарний оператор if...else.
  2. Для правильного формування рядка:
    • Замініть плейсхолдер user_name на фактичне ім'я користувача — проп name;
    • Замініть плейсхолдер calculated_amount_of_money_left на обчислену суму, що залишилася — moneyAvailable - price;
    • Замініть плейсхолдер moneyAvailable на фактичну доступну суму — проп moneyAvailable;
    • Замініть плейсхолдер price на фактичну суму — проп price.
  3. Для підстановки значення, яке не є рядком, використовуйте фігурні дужки {...}.

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Awesome!

Completion rate improved to 2.17

bookЗавдання: Реалізація Умовного Рендерингу – Банківське Сповіщення

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

Завдання: Створення банківського сповіщення

Працюємо з банківським рахунком. Мета — розробити логіку, яка інформує користувача, чи достатньо коштів на його картці для оплати певної суми. Залежно від результату, користувачеві буде показано різні повідомлення.

Завдання:

  • Створити два компоненти — App (батьківський) та Message (дочірній).
  • Батьківський компонент (App) передає пропси moneyAvailable, price та name.
  1. moneyAvailable — сума грошей, яка є у користувача;
  2. price — сума, яку потрібно сплатити;
  3. name — ім'я користувача.
  • Якщо у користувача достатньо коштів для оплати, показати повідомлення: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
  • Якщо у користувача недостатньо коштів для оплати, показати повідомлення: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.
  1. У React для реалізації логіки оператора condition ? ... : ... використовується тернарний оператор if...else.
  2. Для правильного формування рядка:
    • Замініть плейсхолдер user_name на фактичне ім'я користувача — проп name;
    • Замініть плейсхолдер calculated_amount_of_money_left на обчислену суму, що залишилася — moneyAvailable - price;
    • Замініть плейсхолдер moneyAvailable на фактичну доступну суму — проп moneyAvailable;
    • Замініть плейсхолдер price на фактичну суму — проп price.
  3. Для підстановки значення, яке не є рядком, використовуйте фігурні дужки {...}.

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

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

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

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