Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Udfordring: Implementer Betinget Rendering – Chatnotifikation | Grundlæggende om React og Komponentbaseret UI
React Mastery

bookUdfordring: Implementer Betinget Rendering – Chatnotifikation

Opgave: Opret chatnotifikation

Udarbejd en mekanisme til kun at vise en notifikation, når en bruger har ulæste beskeder. Vi skal kontrollere, om brugeren har nogen ulæste beskeder. Hvis denne betingelse er opfyldt, vises en notifikation, der angiver antallet af beskeder. Hvis brugeren ikke har nogen beskeder, vises der intet.

Opgaven er:

  • Opret to komponenter: App som forælderkomponent og Notification som barnekomponent.
  • Forælderkomponenten, App, skal videregive en prop kaldet messages til barnekomponenten. messages-proppen er et array med beskeder. I barnekomponenten skal du kontrollere længden af messages-arrayet.
  • Hvis der er beskeder i arrayet, vis en streng, der siger: You have <amount> of unread messages. Her skal <amount> erstattes med det faktiske antal ulæste beskeder.
  1. For at afgøre, om der er beskeder i arrayet, kan vi kontrollere dets length ved hjælp af length-egenskaben. Syntaksen er - array.length.
  2. I React bruges operatoren && til at implementere logikken fra en if-sætning.
  3. For at konstruere strengen korrekt, skal du erstatte pladsholderen amount med den faktiske længde af arrayet.
  4. Brug krøllede parenteser {array.length} for at indsætte arrayets længde i strengen.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 12

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.17

bookUdfordring: Implementer Betinget Rendering – Chatnotifikation

Stryg for at vise menuen

Opgave: Opret chatnotifikation

Udarbejd en mekanisme til kun at vise en notifikation, når en bruger har ulæste beskeder. Vi skal kontrollere, om brugeren har nogen ulæste beskeder. Hvis denne betingelse er opfyldt, vises en notifikation, der angiver antallet af beskeder. Hvis brugeren ikke har nogen beskeder, vises der intet.

Opgaven er:

  • Opret to komponenter: App som forælderkomponent og Notification som barnekomponent.
  • Forælderkomponenten, App, skal videregive en prop kaldet messages til barnekomponenten. messages-proppen er et array med beskeder. I barnekomponenten skal du kontrollere længden af messages-arrayet.
  • Hvis der er beskeder i arrayet, vis en streng, der siger: You have <amount> of unread messages. Her skal <amount> erstattes med det faktiske antal ulæste beskeder.
  1. For at afgøre, om der er beskeder i arrayet, kan vi kontrollere dets length ved hjælp af length-egenskaben. Syntaksen er - array.length.
  2. I React bruges operatoren && til at implementere logikken fra en if-sætning.
  3. For at konstruere strengen korrekt, skal du erstatte pladsholderen amount med den faktiske længde af arrayet.
  4. Brug krøllede parenteser {array.length} for at indsætte arrayets længde i strengen.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 12
some-alt