Uitdaging: Implementeer Conditionele Weergave in Bankwaarschuwing

Taak: Een Bankwaarschuwing Maken

We werken met een bankrekening. Het doel is om een logica te ontwikkelen die de gebruiker informeert of er voldoende saldo op de kaart staat om een bepaalde prijs te betalen. Afhankelijk van de uitkomst tonen we verschillende berichten aan de gebruiker.

De opdracht is:

• Maak twee componenten - App (ouder) en Message (kind).
• De oudercomponent (App) geeft de props moneyAvailable, price en name door.
  1. moneyAvailable - vertegenwoordigt het bedrag dat de gebruiker heeft;
  2. price - geeft het bedrag aan dat de gebruiker moet betalen;
  3. name - verwijst naar de naam van de gebruiker.
• Als de gebruiker genoeg geld heeft om te betalen, tonen we 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, tonen we het bericht: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. In React gebruiken we de ternaire operator condition ? ... : ... om de logica van een if...else-statement te implementeren.
2. Voor het correct samenstellen 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.