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, des messages différents 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 : désigne le montant à payer ;
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 le placeholder user_name par le nom réel de l'utilisateur : prop name ;
   • Remplacer le placeholder calculated_amount_of_money_left par le montant calculé restant : moneyAvailable - price ;
   • Remplacer le placeholder moneyAvailable par le montant réellement disponible : prop moneyAvailable ;
   • Remplacer le placeholder 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.