# Opgave

Opret en genanvendelig `StatusCard`-komponent, der viser forskellige beskeder baseret på `online`-proppen.

`StatusCard`-komponenten skal inkludere:

1. En overskrift (`h2`-element). Dens tekstindhold skal vise `name`-proppen.

2. Et afsnit (`p`-element).

   * Hvis `online`-proppen er `true`, vises `Online`;
* Ellers vises `Offline`.

`App`-komponenten gengiver allerede flere `StatusCard`-komponenter med forskellige prop-værdier.


## Startkode
Åbn startprojektet nedenfor og udfyld de manglende dele af komponenten.

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-03-starter-show-user-status-messages?file=src%2FApp.jsx)



## Løsning

Du kan sammenligne dit resultat med den endelige løsning nedenfor.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-03-solution-show-user-status-messages?file=src%2FApp.jsx)

Udforsk grundlæggende principper for opbygning af brugergrænseflader med React. Fokus på komponenter, JSX, dataflow, tilstand og sideeffekter anvendt i daglige React-applikationer.

Undersøg, hvad React er, og hvordan det gengiver brugergrænseflader. Fokus på komponenter, JSX-syntaks og visning af elementer på skærmen.

Hvad er hovedformålet med props i React?

Hvilken metode bruges oftest til at gengive en liste af elementer i React?

Hvorfor er key-proppen vigtig, når man gengiver lister?

Dyk ned i overførsel af data mellem komponenter og styring af UI-output. Fokus på props, betinget rendering og rendering af datalister.

Lær, hvordan brugerinteraktioner og eksterne data ændrer brugergrænsefladen over tid. Fokus på håndtering af tilstand og håndtering af sideeffekter med React hooks.

Undersøg almindelige metoder til at style React-komponenter. Fokus på anvendelse af styles med inline-styles og ekstern CSS.

Lær, hvordan man kører et React-projekt og forstår dets struktur. Fokus på at starte et projekt med Vite og navigere i projektfilerne.

Udfordring: Vis Brugerstatusmeddelelser

Opgave

Startkode

Løsning