Défi : Implémenter le Rendu Conditionnel dans l'Alerte Bancaire

Tâche : Création d'une alerte bancaire

Travaillons avec un compte bancaire. L'objectif est de développer une logique qui informe l'utilisateur s'il dispose de fonds suffisants sur sa carte pour couvrir un prix donné. Selon le résultat, différents messages seront affichés à l'utilisateur.

La tâche consiste à :

• Créer deux composants - App, parent, et Message, enfant.
• Le composant parent (App) transmet les props moneyAvailable, price et name.
  1. moneyAvailable - représente le montant d'argent dont dispose l'utilisateur ;
  2. price - indique le montant à payer par l'utilisateur ;
  3. name - fait référence au nom de l'utilisateur.
• Si l'utilisateur dispose de suffisamment d'argent pour payer, afficher le message : Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• Si l'utilisateur ne dispose pas de suffisamment d'argent pour payer, afficher le message : Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

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