# Task

Render a list of movies using the `map()` method.

The `MovieList` component must include:

1. A `ul` element.

2. Render a `li` element for each movie inside the `movies` array using `map()`.

3. Each `li` element must:

   * Display the movie title.
   * Include a unique `key` prop equal to `movie.id`.

The `App` component already passes the `moviesData` array to the `MovieList` component.


## Starter Code
Open the starter project below and complete the missing parts of the component.

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



## Solution

You can compare your result with the final solution below.

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

Explore the fundamentals of building user interfaces with React. Focus on components, JSX, data flow, state, and side effects used in everyday React applications.

Explore what React is and how it renders user interfaces. Focus on components, JSX syntax, and displaying elements on the screen.

What is the main purpose of props in React?

Which method is most commonly used to render a list of items in React?

Why is the key prop important when rendering lists?

Dive into passing data between components and controlling UI output. Focus on props, conditional rendering, and rendering lists of data.

Learn how user interactions and external data change the UI over time. Focus on managing state and handling side effects with React hooks.

Explore common ways to style React components. Focus on applying styles using inline styles and external CSS.

Learn how to run a React project and understand its structure. Focus on starting a project with Vite and navigating the project files.

Challenge: Render a Movie List

Task

Starter Code

Solution