add errors to comments section

package.json

@@ -12,6 +12,7 @@
  "next-sanity": "^0.5.2",
  "react": "18.1.0",
  "react-dom": "18.1.0",
+ "react-hook-form": "^7.32.2",
  "react-icons": "^4.4.0",
  "react-portable-text": "^0.4.3"
  },

pages/post/[slug].tsx

@@ -3,12 +3,26 @@ import Layout from "../../components/Layout";
 import { sanityClient, urlFor } from "../../sanity";
 import { Post } from "../../typings";
 import PortableText from "react-portable-text";
+import { useForm, SubmitHandler } from "react-hook-form";
+
+interface IFormInput {
+ _id: string;
+ name: string;
+ email: string;
+ comment: string;
+}
 
 interface Props {
  post: Post;
 }
 
 function Post({ post }: Props) {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm<IFormInput>();
+
  return (
  <main>
  <Layout>
@@ -67,9 +81,19 @@ function Post({ post }: Props) {
  <form className="flex flex-col p-5 max-w-2xl mx-auto mb-10">
  <h3 className="text-sm text-cyan-400">Enjoyed this article?</h3>
  <h4 className="text-3xl font-bold">Leave a comment below!</h4>
+ <hr className="py-3 mt-2" />
+
+ <input
+ {...register("_id")}
+ type="hidden"
+ name="_id"
+ value={post._id}
+ />
+
  <label className="block mb-5">
  <span className="text-gray-700">Name</span>
  <input
+ {...register("name", { required: true })}
  className="shadow border rounded py-2 px-3 form-input mt-1 block w-full ring-cyan-400 outline-none focus:ring"
  placeholder="John Appleseed"
  type="text"
@@ -78,15 +102,34 @@ function Post({ post }: Props) {
  <label className="block mb-5">
  <span className="text-gray-700">Email</span>
  <input
+ {...register("email", { required: true })}
  className="shadow border rounded py-2 px-3 form-input mt-1 block w-full ring-cyan-400 outline-none focus:ring"
  placeholder="John Appleseed"
  type="text"
  />
  </label>
  <label className="block mb-5">
  <span className="text-gray-700">Comment</span>
- <textarea className="shadow border rounded py-2 px-3 form-textarea mt-1 block w-full ring-cyan-400 outline-none focus:ring" placeholder="John Appleseed" rows={8} />
+ <textarea
+ {...register("comment", { required: true })}
+ className="shadow border rounded py-2 px-3 form-textarea mt-1 block w-full ring-cyan-400 outline-none focus:ring"
+ placeholder="John Appleseed"
+ rows={8}
+ />
  </label>
+
+ {/* errors will return when field validation fails */}
+ <div className="flex flex-col p-5">
+ {errors.name && (
+ <span className="text-red-500">- The Name Field is required</span>
+ )}
+ {errors.comment && (
+ <span className="text-red-500">- The Comment Field is required</span>
+ )}
+ {errors.email && (
+ <span className="text-red-500">- The Email Field is required</span>
+ )}
+ </div>
  </form>
  </Layout>
  </main>

yarn.lock

@@ -855,6 +855,11 @@
  "loose-envify" "^1.1.0"
  "scheduler" "^0.22.0"
 
+"react-hook-form@^7.32.2":
+ "integrity" "sha512-F1A6n762xaRhvtQH5SkQQhMr19cCkHZYesTcKJJeNmrphiZp/cYFTIzC05FnQry0SspM54oPJ9tXFXlzya8VNQ=="
+ "resolved" "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.32.2.tgz"
+ "version" "7.32.2"
+
 "react-icons@^4.4.0":
  "integrity" "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg=="
  "resolved" "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz"
@@ -872,7 +877,7 @@
  dependencies:
  "@sanity/block-content-to-react" "^2.0.0"
 
-"react@*", "react@^17.0.2 || ^18.0.0-0", "react@^18.1.0", "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=15.0.0", "react@>=16.3.0", "react@>16.8.0 || ^17.0.0", "[email protected]":
+"react@*", "react@^16.8.0 || ^17 || ^18", "react@^17.0.2 || ^18.0.0-0", "react@^18.1.0", "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=15.0.0", "react@>=16.3.0", "react@>16.8.0 || ^17.0.0", "[email protected]":
  "integrity" "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ=="
  "resolved" "https://registry.npmjs.org/react/-/react-18.1.0.tgz"
  "version" "18.1.0"