# Oppgave

Lag en gjenbrukbar `StatusCard`-komponent som viser ulike meldinger basert på `online`-propen.

`StatusCard`-komponenten skal inneholde:

1. En overskrift (`h2`-element). Teksten skal vise `name`-propen.

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

   * Hvis `online`-propen er `true`, vis `Online`;
* Ellers vis `Offline`.

`App`-komponenten gjengir allerede flere `StatusCard`-komponenter med ulike propverdier.


## Startkode
Åpne startprosjektet under og fullfør de manglende delene av 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 resultatet ditt med den endelige løsningen under.

[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)

Utforsk grunnleggende prinsipper for å bygge brukergrensesnitt med React. Fokuser på komponenter, JSX, dataflyt, tilstand og sideeffekter brukt i daglige React-applikasjoner.

Utforsk hva React er og hvordan det gjengir brukergrensesnitt. Fokus på komponenter, JSX-syntaks og visning av elementer på skjermen.

Hvilken metode brukes oftest for å rendre en liste med elementer i React?

Hvorfor er key-propen viktig når man rendre lister?

Fordypning i overføring av data mellom komponenter og kontroll av UI-utdata. Fokus på props, betinget rendering og rendering av lister med data.

Lær hvordan brukerinteraksjoner og ekstern data endrer brukergrensesnittet over tid. Fokus på håndtering av tilstand og sideeffekter med React-hooks.

Utforsk vanlige metoder for å style React-komponenter. Fokus på bruk av inline-stiler og ekstern CSS.

Lær hvordan du kjører et React-prosjekt og forstår dets struktur. Fokuser på å starte et prosjekt med Vite og navigere i prosjektfilene.

Utfordring: Vis brukerstatusmeldinger

Oppgave

Startkode

Løsning