Haaste: Toteuta Ehdollinen Renderöinti Chat-ilmoituksessa

Tehtävä: Luo chat-ilmoitus

Suunnitellaan mekanismi, joka näyttää ilmoituksen vain silloin, kun käyttäjällä on lukemattomia viestejä. Tarkistamme, onko käyttäjällä yhtään lukematonta viestiä. Jos tämä ehto täyttyy, näytämme ilmoituksen, jossa kerrotaan viestien määrä. Jos viestejä ei ole, mitään ei näytetä.

Tehtävä:

• Luo kaksi komponenttia: App pääkomponenttina ja Notification lapsikomponenttina.
• Pääkomponentin, App, tulee välittää prop nimeltä messages lapsikomponentille. messages-prop on taulukko, joka sisältää viestit. Lapsikomponentissa tulee tarkistaa messages-taulukon pituus.
• Jos taulukossa on viestejä, näytä merkkijono: You have <amount> of unread messages. Korvaa <amount> todellisella lukemattomien viestien määrällä.

1. Selvittääksesi, onko taulukossa viestejä, voit tarkistaa sen length-ominaisuuden. Syntaksi on - array.length.
2. Reactissa käytetään operaattoria && toteuttamaan if-lauseen logiikkaa.
3. Muodostaaksesi merkkijonon oikein, korvaa paikkamerkki amount taulukon todellisella pituudella.
4. Käytä aaltosulkuja {array.length} asettaaksesi taulukon pituuden merkkijonoon.