Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Conditional Rendering - Bank Alert | Introduction to React Fundamentals
Mastering React

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.

Everything was clear?

Section 1. Chapter 13
course content

Course Content

Mastering React

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.

Everything was clear?

Section 1. Chapter 13
some-alt