# Opgave

Render en liste af film ved hjælp af `map()`-metoden.

`MovieList`-komponenten skal inkludere:

1. Et `ul`-element.

2. Render et `li`-element for hver film i `movies`-arrayet ved hjælp af `map()`.

3. Hvert `li`-element skal:

* Vise filmens titel.
   * Indeholde en unik `key`-prop, der er lig med `movie.id`.

`App`-komponenten sender allerede `moviesData`-arrayet til `MovieList`-komponenten.


## 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-04-starter-render-a-movie-list?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-04-solution-render-a-movie-list?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: Gengiv en Filmliste

Opgave

Startkode

Løsning