Update to Review Form Component

src/components/ReviewForm.js

@@ -15,11 +15,15 @@ export function ReviewForm(props) {
   const[review, setReview ] = useState()
   if (auth) {
     return (
-      <Form onSubmit={submitHandler}>
+      <Form onSubmit={submitHandler} className="my-4">
         <h3>Review {props.movietitle}</h3>
         <Form.Group>
           <Form.Label>Star</Form.Label>
-          <Form.Select name="star" value={star} onChange={(evt) => setStar(evt.target.value) }>
+          <Form.Select
+            name="star"
+            value={star}
+            onChange={(evt) => setStar(evt.target.value)}
+          >
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
@@ -30,17 +34,30 @@ export function ReviewForm(props) {
         </Form.Group>
         <Form.Group>
           <Form.Label>Title</Form.Label>
-          <Form.Control type="text" placeholder="I love this movie" />
+          <Form.Control
+            type="text"
+            placeholder="I love this movie"
+            name="title"
+            onChange={(evt) => setTitle(evt.target.value) }
+          />
         </Form.Group>
         <Form.Group>
           <Form.Label>Review</Form.Label>
-          <Form.Control as="textarea" rows={4} cols={30} placeholder="I could not stop watching!" />
+          <Form.Control
+            as="textarea"
+            rows={4}
+            cols={30}
+            placeholder="I could not stop watching!"
+            name="content"
+            onChange={(evt) => setReview(evt.target.value) }
+          />
         </Form.Group>
-        <Button type="submit" variant="primary">Submit</Button>
+        <Button type="submit" variant="primary">
+          Submit
+        </Button>
       </Form>
-    )
-  }
-  else {
-    return null
+    );
+  } else {
+    return null;
   }
 }