# Tehtävä

Renderöi elokuvalista käyttämällä `map()`-metodia.

`MovieList`-komponentin tulee sisältää:

1. `ul`-elementti.

2. Renderöi `li`-elementti jokaiselle elokuvalle `movies`-taulukossa käyttäen `map()`-metodia.

3. Jokaisen `li`-elementin tulee:

* Näyttää elokuvan nimi.
   * Sisältää yksilöllinen `key`-prop, jonka arvo on `movie.id`.

`App`-komponentti välittää jo `moviesData`-taulukon `MovieList`-komponentille.


## Aloituskoodi
Avaa alla oleva aloitusprojekti ja täydennä puuttuvat osat komponentista.

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



## Ratkaisu

Voit verrata tulostasi lopulliseen ratkaisuun alla.

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

Tutustu Reactin käyttöliittymien rakentamisen perusteisiin. Keskity komponentteihin, JSX:ään, tietovirtaan, tilaan ja sivuvaikutuksiin, joita käytetään jokapäiväisissä React-sovelluksissa.

Tutustu siihen, mitä React on ja miten se renderöi käyttöliittymiä. Keskity komponentteihin, JSX-syntaksiin ja elementtien näyttämiseen näytöllä.

Mikä on propsien pääasiallinen tarkoitus Reactissa?

Mitä menetelmää käytetään yleisimmin listan renderöintiin Reactissa?

Miksi key-prop on tärkeä listoja renderöitäessä?

Syvenny tiedon välittämiseen komponenttien välillä ja käyttöliittymän ulostulon hallintaan. Painopisteenä propsit, ehdollinen renderöinti ja tietolistojen renderöinti.

Opi, miten käyttäjän vuorovaikutukset ja ulkoiset tiedot muuttavat käyttöliittymää ajan myötä. Keskity tilan hallintaan ja sivuvaikutusten käsittelyyn React-hookien avulla.

Tutustu yleisimpiin tapoihin tyylittää React-komponentteja. Keskity tyylien lisäämiseen käyttämällä sisäisiä tyylejä ja ulkoista CSS:ää.

Opi suorittamaan React-projekti ja ymmärtämään sen rakenne. Keskity projektin käynnistämiseen Vite-työkalulla sekä projektitiedostojen selaamiseen.

Haaste: Elokuvalistan Renderöinti

Tehtävä

Aloituskoodi

Ratkaisu