Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Rendu Conditionnel - Alerte Bancaire | Introduction aux Fondamentaux de React
Maîtrise de React

bookDé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.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 13

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.17

bookDéfi : Rendu Conditionnel - Alerte Bancaire

Glissez pour afficher le menu

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.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 13
some-alt