# Oppgave

Render en liste med filmer ved å bruke `map()`-metoden.

`MovieList`-komponenten må inkludere:

1. Et `ul`-element.

2. Render et `li`-element for hver film i `movies`-arrayet ved hjelp av `map()`.

3. Hvert `li`-element må:

* Vise filmtittelen.
   * Inkludere en unik `key`-prop lik `movie.id`.

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


## Startkode
Åpne startprosjektet nedenfor og fullfør de manglende delene av 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øsningsforslag

Du kan sammenligne resultatet ditt med den endelige løsningen 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)

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: Gjengi en Filmliste

Oppgave

Startkode

Løsningsforslag