Défi : Rendu Conditionnel - Alerte Bancaire

Tâche : Créer une Alerte Bancaire

Travaillons avec un compte bancaire. Nous visons à développer une logique qui informe l'utilisateur s'il a suffisamment de fonds sur sa carte pour couvrir un prix donné. Selon le résultat, nous afficherons différents messages à l'utilisateur.

La tâche est :

• Créer deux composants - App, parent, et Message, enfant.
• Le composant parent (App) transfère les props moneyAvailable, price, et name.
  1. moneyAvailable - représente le montant d'argent que l'utilisateur a;
  2. price - désigne le montant d'argent que l'utilisateur doit payer;
  3. name - fait référence au nom de l'utilisateur.
• Si l'utilisateur a assez d'argent pour payer, nous montrons le message : Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• Si l'utilisateur n'a pas assez d'argent pour payer, nous montrons le message : Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. En React, nous utilisons l'opérateur ternaire condition ? ... : ... pour implémenter la logique d'une instruction if...else.
2. Pour construire correctement la chaîne,
   • Remplacez le placeholder user_name par le nom réel de l'utilisateur : prop name;
   • Remplacez le placeholder calculated_amount_of_money_left par le montant calculé d'argent restant - moneyAvailable - price;
   • Remplacez le placeholder moneyAvailable par l'argent réellement disponible - prop moneyAvailable;
   • Remplacez le placeholder price par le prix réel - prop price.
3. Utilisez des accolades {...} pour attribuer une valeur qui n'est pas de type chaîne.