Aufgabe: Erstellung einer Bankbenachrichtigung

Arbeiten mit einem Bankkonto. Ziel ist die Entwicklung einer Logik, die den Benutzer darüber informiert, ob genügend Guthaben auf der 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 – stellt den Betrag dar, den der Benutzer besitzt;
2. price – bezeichnet den Betrag, den der Benutzer bezahlen muss;
3. name – bezieht sich auf den Namen des Benutzers.

• Wenn der Benutzer genügend 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 genügend 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 wird der ternäre Operator condition ? ... : ... verwendet, um die Logik einer if...else-Anweisung umzusetzen.
2. Für die korrekte Zeichenkettenbildung:
   • Platzhalter user_name durch den tatsächlichen Benutzernamen ersetzen: name-Prop;
   • Platzhalter calculated_amount_of_money_left durch den berechneten Restbetrag ersetzen – moneyAvailable - price;
   • Platzhalter moneyAvailable durch den tatsächlichen verfügbaren Betrag ersetzen – moneyAvailable-Prop;
   • Platzhalter price durch den tatsächlichen Preis ersetzen – price-Prop.
3. Geschweifte Klammern {...} verwenden, um einen Wert zuzuweisen, der kein String ist.