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