Défi : Implémenter le Rendu Conditionnel dans la Notification de Chat

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

Élaborer un mécanisme permettant d'afficher une notification uniquement lorsqu'un utilisateur a des messages non lus. Il s'agit de vérifier si l'utilisateur possède des messages non lus. Si cette condition est remplie, afficher 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 en tant que composant parent et Notification en tant que 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 la chaîne suivante : 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, vérifier sa propriété length avec la syntaxe : array.length.
2. En React, utiliser l'opérateur && pour implémenter la logique d'une instruction if.
3. Pour construire correctement la chaîne de caractères, remplacer le paramètre amount par la longueur réelle du tableau.
4. Utiliser des accolades {array.length} pour insérer la longueur du tableau dans la chaîne.