Utmaning: Implementera Villkorlig Rendering i Bankvarning

Uppgift: Skapa en bankvarning

Vi arbetar med ett bankkonto. Målet är att utveckla en logik som informerar användaren om de har tillräckligt med pengar på sitt kort för att täcka ett angivet pris. Beroende på resultatet visar vi olika meddelanden till användaren.

Uppgiften är:

• Skapa två komponenter - App, förälder, och Message, barn.
• Föräldrakomponenten (App) skickar propsen moneyAvailable, price och name.
  1. moneyAvailable - representerar mängden pengar användaren har;
  2. price - anger summan pengar användaren behöver betala;
  3. name - avser användarens namn.
• Om användaren har tillräckligt med pengar för att betala, visar vi meddelandet: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• Om användaren inte har tillräckligt med pengar för att betala, visar vi meddelandet: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. I React använder vi den ternära operatorn condition ? ... : ... för att implementera logiken i ett if...else-uttryck.
2. För att konstruera strängen korrekt,
   • Ersätt platshållaren user_name med det faktiska användarnamnet: name-prop;
   • Ersätt platshållaren calculated_amount_of_money_left med det beräknade beloppet som är kvar - moneyAvailable - price;
   • Ersätt platshållaren moneyAvailable med det faktiska tillgängliga beloppet - moneyAvailable-prop;
   • Ersätt platshållaren price med det faktiska priset - price-prop.
3. Använd klamrar {...} för att tilldela ett värde som inte är av typen sträng.