# Oppgave

Lag en gjenbrukbar `UserCard`-komponent som viser brukerinformasjon ved hjelp av props.
`UserCard`-komponenten skal inkludere:

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

2. Et avsnitt (`p`-element). Teksten skal vise `job`-propen.

`App`-komponenten gjengir allerede flere `UserCard`-komponenter med ulike props.


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

Challenge: Bygg Gjenbrukbare Brukerkort

Oppgave

Startkode

Løsning