Challenge: Implement 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.