Défi : Rendu Conditionnel - Notification de Chat
Tâche : Création de Notification de Chat
Concevons un mécanisme pour afficher une notification uniquement lorsqu'un utilisateur a des messages non lus. Nous vérifierons si l'utilisateur a des messages non lus. Si cette condition est vraie, nous afficherons une notification indiquant le nombre de messages. Cependant, nous n'afficherons rien si l'utilisateur n'a pas de messages.
La tâche est :
- Créez deux composants :
App
comme composant parent etNotification
comme composant enfant. - Le composant parent,
App
, doit passer une prop appeléemessages
au composant enfant. La propmessages
est un tableau contenant des messages. Dans le composant enfant, vous devez vérifier la longueur du tableaumessages
. - S'il y a des messages dans le tableau, affichez une chaîne qui dit :
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, nous pouvons vérifier sa
length
en utilisant la propriété length. La syntaxe est -array.length
. - En React, nous utilisons l'opérateur
&&
pour implémenter la logique d'une instructionif
. - Pour construire correctement la chaîne, remplacez le
amount
par la longueur réelle du tableau. - Utilisez des accolades
{array.length}
pour définir 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 : Rendu Conditionnel - Notification de Chat
Glissez pour afficher le menu
Tâche : Création de Notification de Chat
Concevons un mécanisme pour afficher une notification uniquement lorsqu'un utilisateur a des messages non lus. Nous vérifierons si l'utilisateur a des messages non lus. Si cette condition est vraie, nous afficherons une notification indiquant le nombre de messages. Cependant, nous n'afficherons rien si l'utilisateur n'a pas de messages.
La tâche est :
- Créez deux composants :
App
comme composant parent etNotification
comme composant enfant. - Le composant parent,
App
, doit passer une prop appeléemessages
au composant enfant. La propmessages
est un tableau contenant des messages. Dans le composant enfant, vous devez vérifier la longueur du tableaumessages
. - S'il y a des messages dans le tableau, affichez une chaîne qui dit :
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, nous pouvons vérifier sa
length
en utilisant la propriété length. La syntaxe est -array.length
. - En React, nous utilisons l'opérateur
&&
pour implémenter la logique d'une instructionif
. - Pour construire correctement la chaîne, remplacez le
amount
par la longueur réelle du tableau. - Utilisez des accolades
{array.length}
pour définir la longueur du tableau dans la chaîne.
Merci pour vos commentaires !