Taak: Een Bankwaarschuwing Maken

Werk met een bankrekening. Ontwikkel een logica die de gebruiker informeert of er voldoende saldo op de kaart staat om een opgegeven prijs te dekken. Afhankelijk van het resultaat worden verschillende berichten aan de gebruiker getoond.

De opdracht is:

• Maak twee componenten - App (ouder) en Message (kind).
• De oudercomponent (App) geeft de props moneyAvailable, price en name door.
  1. moneyAvailable - het bedrag dat de gebruiker heeft;
  2. price - het bedrag dat de gebruiker moet betalen;
  3. name - de naam van de gebruiker.
• Als de gebruiker genoeg geld heeft om te betalen, toon het bericht: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• Als de gebruiker niet genoeg geld heeft om te betalen, toon het bericht: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>..

1. In React wordt de ternaire operator condition ? ... : ... gebruikt om de logica van een if...else-statement te implementeren.
2. Voor een correcte opbouw van de string:
   • Vervang de placeholder user_name door de daadwerkelijke gebruikersnaam: name-prop;
   • Vervang de placeholder calculated_amount_of_money_left door het berekende resterende bedrag - moneyAvailable - price;
   • Vervang de placeholder moneyAvailable door het daadwerkelijke beschikbare bedrag - moneyAvailable-prop;
   • Vervang de placeholder price door de daadwerkelijke prijs - price-prop.
3. Gebruik accolades {...} om een waarde toe te wijzen die geen string is.