added useState to handle inputs

client/src/NewVideoForm.jsx

@@ -1,5 +1,10 @@
+import React, { useState } from "react";
+
 import "./NewVideoForm.css";
 const NewVideoForm = () => {
+	const [title, setTitle] = useState("");
+	const [src, setSrc] = useState("");
+
 	const handleSubmit = (e) => {
 		e.preventDefault();
 
@@ -9,10 +14,7 @@ const NewVideoForm = () => {
 				Accept: "application/json",
 				"Content-Type": "application/json",
 			},
-			body: JSON.stringify({
-				title: e.target.title.value,
-				src: e.target.src.value,
-			}),
+			body: JSON.stringify({ title, src }),
 		})
 			.then((response) => response.json())
 			.then((data) => {
@@ -28,12 +30,24 @@ const NewVideoForm = () => {
 			<h2>Add New Video</h2>
 			<form onSubmit={handleSubmit}>
 				<div>
-					<label htmlFor="title">Video Title:</label>
-					<input type="text" id="title" required />
+					<label htmlFor="title">Video Title: </label>
+					<input
+						type="text"
+						id="title"
+						value={title}
+						onChange={(e) => setTitle(e.target.value)}
+						required
+					/>
 				</div>
 				<div>
-					<label htmlFor="src">Video url:</label>
-					<input type="url" id="src" required />
+					<label htmlFor="src">Video URL: </label>
+					<input
+						type="url"
+						id="src"
+						value={src}
+						onChange={(e) => setSrc(e.target.value)}
+						required
+					/>
 				</div>
 				<button type="submit">Submit</button>
 			</form>