Uitdaging: Implementeer Voorwaardelijke Weergave in Chatmelding

Taak: Chatmelding maken

Laten we een mechanisme ontwikkelen om een melding weer te geven alleen wanneer een gebruiker ongelezen berichten heeft. We controleren of de gebruiker ongelezen berichten heeft. Als deze voorwaarde waar is, tonen we een melding met het aantal berichten. Als de gebruiker geen berichten heeft, tonen we niets.

De opdracht is:

• Maak twee componenten: App als oudercomponent en Notification als kindcomponent.
• De oudercomponent, App, moet een prop genaamd messages doorgeven aan de kindcomponent. De prop messages is een array met berichten. In de kindcomponent controleer je de lengte van de messages array.
• Als er berichten in de array staan, toon dan de tekst: You have <amount> of unread messages. Vervang <amount> door het daadwerkelijke aantal ongelezen berichten.

1. Om te bepalen of er berichten in de array staan, kun je de length-eigenschap gebruiken. De syntaxis is - array.length.
2. In React gebruiken we de operator && om de logica van een if-statement te implementeren.
3. Om de string correct op te bouwen, vervang je de placeholder amount door de daadwerkelijke lengte van de array.
4. Gebruik accolades {array.length} om de lengte van de array in de string te plaatsen.