Fix issues with Submitting Reviews

src/components/ReviewForm.js

@@ -6,13 +6,7 @@ import { FSContext } from "../contexts/FSContext"
 import { useContext, useState, useEffect } from "react"
 import { collection, addDoc } from "firebase/firestore"; 
 
-const submitHandler = async (event) => {
+
-event.preventDefault()
-const userReview = {title: title, star: star, body: review }
-const col = collection(db, `movies/${props.movieId}/reviews`)
-const ref = await addDoc(col, userReview )
-console.log( ref )
-}
 
 export function ReviewForm(props) {
   const auth = useContext(AuthContext)
@@ -32,6 +26,14 @@ export function ReviewForm(props) {
     }
   }, [star, title, review])
   
+  const submitHandler = async (event) => {
+    event.preventDefault()
+    const userReview = {title: title, star: star, body: review }
+    const col = collection(db, `movies/${props.movieId}/reviews`)
+    const ref = await addDoc(col, userReview )
+    console.log( ref )
+    }
+
   if (auth) {
     return (
       <Form onSubmit={submitHandler} className="my-4">

src/pages/Detail.js

@@ -50,7 +50,7 @@ export function Detail(props) {
                 </Row>
                 <Row>
                     <Col>
-                        <ReviewForm movietitle={movieData.movie_title} movieId={movieData.movieId} />
+                        <ReviewForm movietitle={movieData.movie_title} movieId={movieData.id} />
                     </Col>
                 </Row>
             </Container>