@@ -52,7 +60,7 @@ const Movie = (props) => {
diff --git a/src/components/addMovieForm.js b/src/components/addMovieForm.js
new file mode 100644
index 00000000..475e57c1
--- /dev/null
+++ b/src/components/addMovieForm.js
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
+import axios from 'axios';
+
+const AddMovieForm = (props) => {
+ const navigate = useNavigate();
+
+ const { setMovies } = props;
+ const [movie, setMovie] = useState({
+ title: "",
+ director: "",
+ genre: "",
+ metascore: 0,
+ description: ""
+ });
+
+ const handleChange = (e) => {
+ setMovie({
+ ...movie,
+ [e.target.name]: e.target.value
+ });
+ }
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ axios.post(`http://localhost:9000/api/movies`, movie)
+ .then(res => {
+ setMovies(movie.data)
+ navigate("/movies")
+ }).catch(err => console.log(err.response))
+ }
+
+ const { title, director, genre, metascore, description } = movie;
+
+ return (
+
);
+}
+
+export default AddMovieForm;