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 et Notification comme composant enfant.
• Le composant parent, App, doit passer une prop appelée messages au composant enfant. La prop messages est un tableau contenant des messages. Dans le composant enfant, vous devez vérifier la longueur du tableau messages.
• 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.

1. 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.
2. En React, nous utilisons l'opérateur && pour implémenter la logique d'une instruction if.
3. Pour construire correctement la chaîne, remplacez le amount par la longueur réelle du tableau.
4. Utilisez des accolades {array.length} pour définir la longueur du tableau dans la chaîne.