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

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

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

Завдання:

• Створити два компоненти — 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. Для підстановки значення, яке не є рядком, використовуйте фігурні дужки {...}.