Lisa Canini

src/components/App.js

@@ -1,14 +1,34 @@
 // Step 1: Import React, and Component from react.
+import React, { Component } from 'react';
 // Step 2: Import render from react-dom
+import { render } from 'react-dom';
 // Step 3: Import MoviesList from MoviesList
+import MoviesList from './MoviesList';
 
 // Step 4: Write a class called App, extending Component.
-// Step 5: Write a constructor function without passing anything into it.
-// Step 6: Inside the constructor function, call super without passing anything into it.
-// Step 7: Inside the constructor function, create a state on this, and set it to an object.
-// Step 8: Inside the object, set a key to movies, and the value to an array of movies
-// Step 9: Write a render function.
-// Step 10: Inside the render function, write a return statement.
-// Step 11: Inside the return statement, write a selfclosing tag called MoviesList
-// Step 12: Inside the selfclosing tag, give it an attribute called movies, and pass it this.state.movies inside a set of curly bracket.
+
+class App extends Component {
+    // Step 5: Write a constructor function without passing anything into it.
+    constructor() {
+        // Step 6: Inside the constructor function, call super without passing anything into it.
+        super();
+        // Step 7: Inside the constructor function, create a state on this, and set it to an object.
+        this.state = {
+            // Step 8: Inside the object, set a key to movies, and the value to an array of movies
+            movies: ["Purple Rain", "Graffiti Bridge", "Under the Cherry Moon", "Sign O the Times"],
+        };
+    }
+    // Step 9: Write a render function.
+
+    render() {
+            // Step 10: Inside the render function, write a return statement.
+            // Step 11: Inside the return statement, write a selfclosing tag called MoviesList
+            // Step 12: Inside the selfclosing tag, give it an attribute called movies, and pass it this.state.movies inside a set of curly bracket.
+    return (<MoviesList movies = { this.state.movies }/>);
+    }
+
+}
+
 // Step 13: Outside the class, export the App class as a default.
+
+export default App;

src/components/MoviesList.js

@@ -1,10 +1,21 @@
 // Import React from react.
+import React from 'react';
 
 // Create a const arrow function called MoviesList.
-// Return an unordered list
-// Inside the unordered list, embed a javascript expression (curly brackets).
-// Inside the javascript expression, map the movies array
-// The function inside map should take in two arguments, movie and i (for index).
-// The function should return a list item, with a javascript expression movie (the same variable as map).
-// The list item should have an attribute called key, that takes in i as a javascript expression.
+const MoviesList = (props) => {
+    return (
+    // Return an unordered list
+    // Inside the unordered list, embed a javascript expression (curly brackets).
+    // Inside the javascript expression, map the movies array
+    // The function inside map should take in two arguments, movie and i (for index).
+    // The function should return a list item, with a javascript expression movie (the same variable as map).
+    // The list item should have an attribute called key, that takes in i as a javascript expression.
+        <ul> {props.movies.map((movie, i) => {
+        return (<li key = {i}>{ movie }</li>);
+        })} </ul>
+    )
+}
+
+export default MoviesList;
+
 // Outside the arrow function, export the function MoviesList as a default.