Herausforderung: Implementierung der Bedingten Darstellung in Bankbenachrichtigungen

Aufgabe: Erstellung einer Bankbenachrichtigung

Arbeiten wir mit einem Bankkonto. Ziel ist es, eine Logik zu entwickeln, die den Benutzer darüber informiert, ob genügend Guthaben auf seiner Karte vorhanden ist, um einen bestimmten Preis zu bezahlen. Abhängig vom Ergebnis werden unterschiedliche Nachrichten angezeigt.

Die Aufgabe lautet:

• Zwei Komponenten erstellen – App (Elternkomponente) und Message (Kindkomponente).
• Die Elternkomponente (App) übergibt die Props moneyAvailable, price und name.

1. moneyAvailable – steht für den Betrag, den der Benutzer zur Verfügung hat;
2. price – bezeichnet den Betrag, den der Benutzer bezahlen muss;
3. name – bezieht sich auf den Namen des Benutzers.

• Wenn der Benutzer genug Geld hat, um zu bezahlen, wird folgende Nachricht angezeigt: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• Wenn der Benutzer nicht genug Geld hat, wird folgende Nachricht angezeigt: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. In React verwenden wir den ternären Operator condition ? ... : ..., um die Logik einer if...else-Anweisung umzusetzen.
2. Um den String korrekt zu erstellen:
   • Ersetze den Platzhalter user_name durch den tatsächlichen Benutzernamen: name-Prop;
   • Ersetze den Platzhalter calculated_amount_of_money_left durch den berechneten verbleibenden Betrag – moneyAvailable - price;
   • Ersetze den Platzhalter moneyAvailable durch den tatsächlichen verfügbaren Betrag – moneyAvailable-Prop;
   • Ersetze den Platzhalter price durch den tatsächlichen Preis – price-Prop.
3. Verwende geschweifte Klammern {...}, um einen Wert zuzuweisen, der kein String ist.