$11\mathrm{.}7\mathrm{.}3$ Hands$-$On Practice

PROJECT $1$: Editor

DIFFICULTY LEVEL: Beginner

Overview

This project requires the creation of multiple interconnected components. Figure

$11\mathrm{.}20$ illustrates what the finished version should look like along with the required

CHAPTER $11$ JavaScript $4$: React

nuvielist

FIGURE $11\mathrm{.}20$ Completed Project $1$

component hierarchy. Changing any of the form fields on the right will update the

movie display on the left.

Instructions

The starting of the components and their render $()$ methods have been

provided. The data is contained within the file movie$-$data.js$.$ You can

complete this project using the techniques covered in sections $11\mathrm{.}2$ and $11\mathrm{.}3.$

You could instead use create$-$react$-$app as your starting point.

Implement the rest of the MovieList, SingleMovie, and MovieLink

components. For MovieList, you will need to render a singleMovie$>$ for each

movie in the passed list of movies using map $().$ You will need to pass a movie

object to SingleMovie. For singleMovie$,$ you will need to replace the sample

data with data from the passed$-$in movie object. In the footer area, you will

render a