From a9e4195f08153c65abf4700e906dbcbcb29172fa Mon Sep 17 00:00:00 2001
From: Jorge Jimenez <calenocam24@gmail.com>
Date: Tue, 8 Sep 2020 20:13:03 -0400
Subject: [PATCH 1/4] Finished Updating movies

---
 client/package-lock.json            | 132 ++++++++++++++++++++--------
 client/src/App.js                   |   5 ++
 client/src/Movies/Movie.js          |  15 ++--
 client/src/components/UpdateForm.js |  85 ++++++++++++++++++
 4 files changed, 196 insertions(+), 41 deletions(-)
 create mode 100644 client/src/components/UpdateForm.js

diff --git a/client/package-lock.json b/client/package-lock.json
index 79a45ec39..cd3583dbc 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -8054,7 +8054,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -8072,11 +8073,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -8089,15 +8092,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -8200,7 +8206,8 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -8210,6 +8217,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -8222,17 +8230,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "1.2.5",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -8249,6 +8260,7 @@
             "mkdirp": {
               "version": "0.5.3",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "^1.2.5"
               }
@@ -8304,7 +8316,8 @@
             },
             "npm-normalize-package-bin": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "npm-packlist": {
               "version": "1.4.8",
@@ -8329,7 +8342,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -8339,6 +8353,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -8407,7 +8422,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -8437,6 +8453,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -8454,6 +8471,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -8492,11 +8510,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         }
@@ -15297,7 +15317,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -15315,11 +15336,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -15332,15 +15355,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -15443,7 +15469,8 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -15453,6 +15480,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -15465,17 +15493,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "1.2.5",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -15492,6 +15523,7 @@
             "mkdirp": {
               "version": "0.5.3",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "^1.2.5"
               }
@@ -15547,7 +15579,8 @@
             },
             "npm-normalize-package-bin": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "npm-packlist": {
               "version": "1.4.8",
@@ -15572,7 +15605,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -15582,6 +15616,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -15650,7 +15685,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -15680,6 +15716,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -15697,6 +15734,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -15735,11 +15773,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         },
@@ -16056,7 +16096,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -16074,11 +16115,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -16091,15 +16134,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -16202,7 +16248,8 @@
             },
             "inherits": {
               "version": "2.0.4",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -16212,6 +16259,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -16224,17 +16272,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "1.2.5",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -16251,6 +16302,7 @@
             "mkdirp": {
               "version": "0.5.3",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "^1.2.5"
               }
@@ -16306,7 +16358,8 @@
             },
             "npm-normalize-package-bin": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "npm-packlist": {
               "version": "1.4.8",
@@ -16331,7 +16384,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -16341,6 +16395,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -16409,7 +16464,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -16439,6 +16495,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -16456,6 +16513,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -16494,11 +16552,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         },
diff --git a/client/src/App.js b/client/src/App.js
index 66daf147f..0c092aea0 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,6 +3,7 @@ import { Route } from "react-router-dom";
 import SavedList from "./Movies/SavedList";
 import MovieList from "./Movies/MovieList";
 import Movie from "./Movies/Movie";
+import UpdateForm from "./components/UpdateForm"
 import axios from 'axios';
 
 const App = () => {
@@ -32,6 +33,10 @@ const App = () => {
         <MovieList movies={movieList} />
       </Route>
 
+      <Route path="/update-movie/:id">
+        <UpdateForm getMovieList={getMovieList} />
+      </Route>
+
       <Route path="/movies/:id">
         <Movie addToSavedList={addToSavedList} />
       </Route>
diff --git a/client/src/Movies/Movie.js b/client/src/Movies/Movie.js
index e2da52bdb..07f448644 100644
--- a/client/src/Movies/Movie.js
+++ b/client/src/Movies/Movie.js
@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from "react";
 import axios from "axios";
-import { useParams } from "react-router-dom";
+import { useParams, useHistory } from "react-router-dom";
 import MovieCard from "./MovieCard";
 
-function Movie({ addToSavedList }) {
+function Movie({ addToSavedList, movieList, setMovieList }) {
   const [movie, setMovie] = useState(null);
-  const params = useParams();
+  const { id } = useParams();
+  console.log(" id params for movies", id)
+  const { push } = useHistory()
 
   const fetchMovie = (id) => {
     axios
@@ -19,8 +21,8 @@ function Movie({ addToSavedList }) {
   };
 
   useEffect(() => {
-    fetchMovie(params.id);
-  }, [params.id]);
+    fetchMovie(id);
+  }, [id]);
 
   if (!movie) {
     return <div>Loading movie information...</div>;
@@ -33,6 +35,9 @@ function Movie({ addToSavedList }) {
       <div className="save-button" onClick={saveMovie}>
         Save
       </div>
+      <button className="edit-button" onClick={() => push(`/update-movie/${id}`)}>
+        Edit
+      </button>
     </div>
   );
 }
diff --git a/client/src/components/UpdateForm.js b/client/src/components/UpdateForm.js
new file mode 100644
index 000000000..e9b00e3d7
--- /dev/null
+++ b/client/src/components/UpdateForm.js
@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from "react";
+import { useParams, useHistory } from "react-router-dom";
+import axios from "axios";
+
+const initialItem = {
+  id: "",
+  title: "",
+  director: "",
+  metascore: "",
+  stars: [],
+};
+
+const UpdateForm = ({ getMovieList }) => {
+  const [update, setUpdate] = useState(initialItem);
+  const { push } = useHistory();
+  //This one shows the variables in the url
+  const { id } = useParams();
+  console.log("This is  the id params for update", id);
+
+  useEffect(() => {
+    axios
+      .get(`http://localhost:5000/api/movies/${id}`)
+      .then((res) => {
+        console.log("This is the Update Response", res);
+        setUpdate(res.data);
+      })
+      .catch((error) => console.log("This is the update error", error.message));
+  }, [id]);
+  const handleChanger = (e) => {
+    e.persist();
+
+    setUpdate({
+      ...update,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // I did a PUT request to update movies
+    axios
+      .put(`http://localhost:5000/api/movies/${id}`, update)
+      .then((resp) => {
+        console.log("Updating response", resp.data);
+        getMovieList();
+        push("/");
+      })
+      .catch((err) => console.log("The error is:", err.message));
+  };
+
+  return (
+    <div>
+      <h2>Please Update Movie</h2>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          name="title"
+          onChange={handleChanger}
+          placeholder="title"
+          value={update.title}
+        />
+
+        <input
+          type="text"
+          name="director"
+          onChange={handleChanger}
+          placeholder="director"
+          value={update.director}
+        />
+
+        <input
+          type="number"
+          name="metascore"
+          onChange={handleChanger}
+          placeholder="Metascore"
+          value={update.metascore}
+        />
+
+        <button>Update</button>
+      </form>
+    </div>
+  );
+};
+
+export default UpdateForm;

From 34a3b797f3beef07a54d1dc9003f3b87012fcf3d Mon Sep 17 00:00:00 2001
From: Jorge Jimenez <calenocam24@gmail.com>
Date: Tue, 8 Sep 2020 21:03:39 -0400
Subject: [PATCH 2/4] I added the delete request

---
 client/src/App.js                   |  2 +-
 client/src/Movies/Movie.js          | 19 ++++++++++++++++++-
 client/src/components/UpdateForm.js |  4 ++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 0c092aea0..aded0fe87 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -38,7 +38,7 @@ const App = () => {
       </Route>
 
       <Route path="/movies/:id">
-        <Movie addToSavedList={addToSavedList} />
+        <Movie addToSavedList={addToSavedList} setMovieList={setMovieList} getMovieList={getMovieList} />
       </Route>
     </>
   );
diff --git a/client/src/Movies/Movie.js b/client/src/Movies/Movie.js
index 07f448644..77a06eecb 100644
--- a/client/src/Movies/Movie.js
+++ b/client/src/Movies/Movie.js
@@ -3,7 +3,7 @@ import axios from "axios";
 import { useParams, useHistory } from "react-router-dom";
 import MovieCard from "./MovieCard";
 
-function Movie({ addToSavedList, movieList, setMovieList }) {
+function Movie({ addToSavedList, getMovieList }) {
   const [movie, setMovie] = useState(null);
   const { id } = useParams();
   console.log(" id params for movies", id)
@@ -20,10 +20,24 @@ function Movie({ addToSavedList, movieList, setMovieList }) {
     addToSavedList(movie);
   };
 
+  const deleteMovie = e => {
+    e.preventDefault();
+    axios
+    // I did a delete request to delete movies
+      .delete(`http://localhost:5000/api/movies/${id}`)
+      .then(res => {
+        getMovieList(res.data);
+        push('/')
+      })
+      .catch(err => console.log(err.message))
+  }
+
   useEffect(() => {
     fetchMovie(id);
   }, [id]);
 
+  
+
   if (!movie) {
     return <div>Loading movie information...</div>;
   }
@@ -38,6 +52,9 @@ function Movie({ addToSavedList, movieList, setMovieList }) {
       <button className="edit-button" onClick={() => push(`/update-movie/${id}`)}>
         Edit
       </button>
+      <button className="edit-button" onClick={deleteMovie}>
+        Delete
+      </button>
     </div>
   );
 }
diff --git a/client/src/components/UpdateForm.js b/client/src/components/UpdateForm.js
index e9b00e3d7..f238f78fd 100644
--- a/client/src/components/UpdateForm.js
+++ b/client/src/components/UpdateForm.js
@@ -40,8 +40,8 @@ const UpdateForm = ({ getMovieList }) => {
     // I did a PUT request to update movies
     axios
       .put(`http://localhost:5000/api/movies/${id}`, update)
-      .then((resp) => {
-        console.log("Updating response", resp.data);
+      .then((res) => {
+        console.log("Updating response", res.data);
         getMovieList();
         push("/");
       })

From 89ffcbb92730a0532393739c986d01011f585006 Mon Sep 17 00:00:00 2001
From: Jorge Jimenez <calenocam24@gmail.com>
Date: Tue, 8 Sep 2020 21:27:01 -0400
Subject: [PATCH 3/4] created adding a movie

---
 client/src/App.js                     | 11 +++-
 client/src/components/AddMovieInfo.js | 75 +++++++++++++++++++++++++++
 2 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/AddMovieInfo.js

diff --git a/client/src/App.js b/client/src/App.js
index aded0fe87..ea9ccf7e3 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from "react";
-import { Route } from "react-router-dom";
+import { Route, NavLink } from "react-router-dom";
 import SavedList from "./Movies/SavedList";
 import MovieList from "./Movies/MovieList";
 import Movie from "./Movies/Movie";
 import UpdateForm from "./components/UpdateForm"
+import AddMovieInfo from "./components/AddMovieInfo";
 import axios from 'axios';
 
 const App = () => {
@@ -29,6 +30,10 @@ const App = () => {
     <>
       <SavedList list={savedList} />
 
+      <div>
+          <NavLink to="/add-movie">Add New Movie Info</NavLink>
+        </div>
+
       <Route exact path="/">
         <MovieList movies={movieList} />
       </Route>
@@ -40,6 +45,10 @@ const App = () => {
       <Route path="/movies/:id">
         <Movie addToSavedList={addToSavedList} setMovieList={setMovieList} getMovieList={getMovieList} />
       </Route>
+
+      <Route exact path="/add-movie">
+        <AddMovieInfo getMovieList={getMovieList} />
+      </Route>
     </>
   );
 };
diff --git a/client/src/components/AddMovieInfo.js b/client/src/components/AddMovieInfo.js
new file mode 100644
index 000000000..5279035fd
--- /dev/null
+++ b/client/src/components/AddMovieInfo.js
@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import { useParams, useHistory } from "react-router-dom";
+import axios from "axios";
+
+const AddMovieInfo = ({ getMovieList }) => {
+  const movieInfo = {
+    id: Date.now(),
+    title: "",
+    director: "",
+    metarscore: "",
+    stars: [],
+  };
+
+  const [newMovie, setNewMovie] = useState(movieInfo);
+  const { push } = useHistory();
+ 
+
+  const handleChanger = (e) => {
+    setNewMovie({ ...newMovie, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    axios
+      .post("http://localhost:5000/api/movies", newMovie)
+      .then((res) => {
+        console.log("The response for newFriendFrom is:", res);
+        setNewMovie(res.data);
+        getMovieList();
+        push("/");
+      })
+      .catch((err) => console.log("NewMovie data error:", err.message));
+    setNewMovie({
+      title: "",
+      director: "",
+      metarscore: "",
+      stars: [],
+    });
+  };
+
+  return (
+    <>
+      <h1>Please Add A New Movie Info</h1>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          name="title"
+          onChange={handleChanger}
+          placeholder="title"
+          value={newMovie.title}
+        />
+
+        <input
+          type="text"
+          name="director"
+          onChange={handleChanger}
+          placeholder="director"
+          value={newMovie.director}
+        />
+
+        <input
+          type="number"
+          name="metascore"
+          onChange={handleChanger}
+          placeholder="Metascore"
+          value={newMovie.metascore}
+        />
+
+        <button>Add A New Movie Info</button>
+      </form>
+    </>
+  );
+};
+
+export default AddMovieInfo;

From 28c843f669769c14fd75183404468f6e3d1a281e Mon Sep 17 00:00:00 2001
From: Jorge Jimenez <calenocam24@gmail.com>
Date: Tue, 8 Sep 2020 22:02:51 -0400
Subject: [PATCH 4/4] did some stretch

---
 client/src/components/UpdateForm.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/client/src/components/UpdateForm.js b/client/src/components/UpdateForm.js
index f238f78fd..8cce5c6be 100644
--- a/client/src/components/UpdateForm.js
+++ b/client/src/components/UpdateForm.js
@@ -35,6 +35,14 @@ const UpdateForm = ({ getMovieList }) => {
     });
   };
 
+  const starsChangeHandler = (e, index) => {
+    e.persist();
+    let actors = [...update.stars];
+    actors[index] = e.target.value;
+    console.log("This is the actors index", actors[index]);
+    setUpdate({ ...update, stars: [...actors] });
+  };
+
   const handleSubmit = (e) => {
     e.preventDefault();
     // I did a PUT request to update movies
@@ -75,8 +83,24 @@ const UpdateForm = ({ getMovieList }) => {
           placeholder="Metascore"
           value={update.metascore}
         />
+Im doing some mapping here with the 
+        <div>
+          <h2>Update New Actors</h2>
+          {update.stars.map((actor, index) => {
+            return (
+                <div key={actor.id}>
+              <input
+                type="text"
+                name={actor}
+                value={actor}
+                onChange={(e) => starsChangeHandler(e, index)}
+              />
+              </div>
+            );
+          })}
+        </div>
 
-        <button>Update</button>
+        <button>Update New Info</button>
       </form>
     </div>
   );