# Opgave

Opret en genanvendelig `UserCard`-komponent, der viser brugerinformation ved hjælp af props.
`UserCard`-komponenten skal inkludere:

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

2. Et afsnit (`p`-element). Teksten skal vise `job`-proppen.

`App`-komponenten gengiver allerede flere `UserCard`-komponenter med forskellige props.


## 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-02-starter?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-02-solution?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.

Challenge: Opbyg Genanvendelige Brugerkort

Opgave

Startkode

Løsning