Challenge: Conditional Rendering - Bank Alert

Task: Creating a Bank Alert

Let's work with a bank account. We aim to develop a logic that informs the user whether they have sufficient funds on their card to cover a given price. Depending on the outcome, we will display different messages to the user.

The task is:

• Create two components - App, parent, and Message, child.
• The parent component (App) transfers the props moneyAvailable, price, and name.
  1. moneyAvailable - represents the amount of money the user has;
  2. price - denotes the amount of money the user needs to pay;
  3. name - refers to the user's name.
• If the user has enough money to pay, we show the message: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• If the user has not enough money to pay, we show the message: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. In React, we use the ternary operator condition ? ... : ... to implement the logic of an if...else statement.
2. To construct the string correctly,
   • Replace the placeholder user_name with the actual user name: name prop;
   • Replace the placeholder calculated_amount_of_money_left with the calculated amount of money left - moneyAvailable - price;
   • Replace the placeholder moneyAvailable with the actual available money - moneyAvailable prop;
   • Replace the placeholder price with the actual price - price prop.
3. Use curly braces {...} to assign a value that is not a string type.