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.