Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Implémenter le Rendu Conditionnel – Notification de Chat | Fondamentaux de React et Interface Utilisateur Basée sur les Composants
Maîtrise de React

bookDéfi : Implémenter le Rendu Conditionnel – Notification de Chat

Tâche : Création d'une notification de chat

Concevons un mécanisme permettant d'afficher une notification uniquement lorsqu'un utilisateur a des messages non lus. Nous allons vérifier si l'utilisateur possède des messages non lus. Si cette condition est remplie, nous afficherons une notification indiquant le nombre de messages. En revanche, rien ne sera affiché si l'utilisateur n'a aucun message.

La tâche consiste à :

  • Créer deux composants : App comme composant parent et Notification comme composant enfant.
  • Le composant parent, App, doit transmettre une prop appelée messages au composant enfant. La prop messages est un tableau contenant les messages. Dans le composant enfant, il faut vérifier la longueur du tableau messages.
  • S'il y a des messages dans le tableau, afficher une chaîne de caractères indiquant : You have <amount> of unread messages. Le <amount> doit être remplacé par le nombre réel de messages non lus.
  1. Pour déterminer s'il y a des messages dans le tableau, on peut vérifier sa propriété length avec la syntaxe : array.length.
  2. En React, on utilise l'opérateur && pour implémenter la logique d'une instruction if.
  3. Pour construire correctement la chaîne de caractères, remplacez le paramètre amount par la longueur réelle du tableau.
  4. Utilisez des accolades {array.length} pour insérer la longueur du tableau dans la chaîne.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 12

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 : Implémenter le Rendu Conditionnel – Notification de Chat

Glissez pour afficher le menu

Tâche : Création d'une notification de chat

Concevons un mécanisme permettant d'afficher une notification uniquement lorsqu'un utilisateur a des messages non lus. Nous allons vérifier si l'utilisateur possède des messages non lus. Si cette condition est remplie, nous afficherons une notification indiquant le nombre de messages. En revanche, rien ne sera affiché si l'utilisateur n'a aucun message.

La tâche consiste à :

  • Créer deux composants : App comme composant parent et Notification comme composant enfant.
  • Le composant parent, App, doit transmettre une prop appelée messages au composant enfant. La prop messages est un tableau contenant les messages. Dans le composant enfant, il faut vérifier la longueur du tableau messages.
  • S'il y a des messages dans le tableau, afficher une chaîne de caractères indiquant : You have <amount> of unread messages. Le <amount> doit être remplacé par le nombre réel de messages non lus.
  1. Pour déterminer s'il y a des messages dans le tableau, on peut vérifier sa propriété length avec la syntaxe : array.length.
  2. En React, on utilise l'opérateur && pour implémenter la logique d'une instruction if.
  3. Pour construire correctement la chaîne de caractères, remplacez le paramètre amount par la longueur réelle du tableau.
  4. Utilisez des accolades {array.length} pour insérer la longueur du tableau dans la chaîne.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 12
some-alt