Dé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 etNotification
comme composant enfant. - Le composant parent,
App
, doit transmettre une prop appeléemessages
au composant enfant. La propmessages
est un tableau contenant les messages. Dans le composant enfant, il faut vérifier la longueur du tableaumessages
. - 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.
- 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
. - En React, on utilise l'opérateur
&&
pour implémenter la logique d'une instructionif
. - Pour construire correctement la chaîne de caractères, remplacez le paramètre
amount
par la longueur réelle du tableau. - Utilisez des accolades
{array.length}
pour insérer la longueur du tableau dans la chaîne.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
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
Dé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 etNotification
comme composant enfant. - Le composant parent,
App
, doit transmettre une prop appeléemessages
au composant enfant. La propmessages
est un tableau contenant les messages. Dans le composant enfant, il faut vérifier la longueur du tableaumessages
. - 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.
- 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
. - En React, on utilise l'opérateur
&&
pour implémenter la logique d'une instructionif
. - Pour construire correctement la chaîne de caractères, remplacez le paramètre
amount
par la longueur réelle du tableau. - Utilisez des accolades
{array.length}
pour insérer la longueur du tableau dans la chaîne.
Merci pour vos commentaires !