Utfordring: Implementere Betinget Rendering i Chatvarsling

Oppgave: Lage chatvarsling

Utvikle en mekanisme som viser en varsling kun når en bruker har uleste meldinger. Vi skal kontrollere om brukeren har noen uleste meldinger. Hvis denne betingelsen er oppfylt, vises en varsling som indikerer antall meldinger. Hvis brukeren ikke har noen meldinger, vises ingenting.

Oppgaven er:

• Lag to komponenter: App som foreldreakomponent og Notification som barnekomponent.
• Foreldreakomponenten, App, skal sende en prop kalt messages til barnekomponenten. messages-propen er et array som inneholder meldinger. I barnekomponenten må du sjekke lengden på messages-arrayet.
• Hvis det finnes meldinger i arrayet, vis en streng som sier: You have <amount> of unread messages. Her skal <amount> erstattes med det faktiske antallet uleste meldinger.

1. For å finne ut om det finnes meldinger i arrayet, kan vi sjekke length ved å bruke length-egenskapen. Syntaksen er - array.length.
2. I React bruker vi operatoren && for å implementere logikken til en if-setning.
3. For å sette sammen strengen riktig, erstatt plassholderen amount med den faktiske lengden på arrayet.
4. Bruk krøllparenteser {array.length} for å sette inn arrayets lengde i strengen.