Form Handler

Form Without React Form

import { useRouter } from "next/navigation";
import React, { useState } from "react";

const EditForm = ({ course }) => {
  const [newtitle, setNewtitle] = useState(course.title);
  const [newDescription, setNewDescription] = useState(course.description);
  const [newPrice, setNewPrice] = useState(course.price);

  const router = useRouter();

  async function formHandler(e) {
    e.preventDefault();
    const newCourse = {
      _id: course.id,
      title: newtitle,
      description: newDescription,
      price: newPrice,
    };

    console.log(newCourse);
  }

  return (
    <main>
      <div>
        <h1>Edit Course</h1>

        <form onSubmit={formHandler}>
          <div>
            <label htmlFor="courseTitle">Edit The Course Title</label>
            <input
              type="text"
              placeholder="Edit Course Title"
              onChange={(e) => setNewtitle(e.target.value)}
              value={newtitle}
            />
          </div>

          <div className="flex flex-col gap-2">
            <label htmlFor="courseTitle">Edit The Course Description</label>
            <input
              type="text"
              placeholder="Edit Course Desceription"
              onChange={(e) => setNewDescription(e.target.value)}
              value={newDescription}
            />
          </div>

          <div>
            <label htmlFor="courseTitle">Edit The Course Price</label>
            <input
              type="number"
              placeholder="Edit Course Desceription"
              onChange={(e) => setNewPrice(e.target.value)}
              value={newPrice}
            />
          </div>

          <button>Update Course</button>
        </form>
      </div>
    </main>
  );
};

export default EditForm;

React Hook Form

"use client";
import React from "react";
import { useForm } from "react-hook-form";

export default function CreateContactForm() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm();

  function onSumbit(data) {
    console.log(data);
  }
  return (
    <div>
      <form onSubmit={handleSubmit(onSumbit)}>
        <div className="mb-6">
          <label htmlFor="name">Your Name</label>
          <input
            {...register("name", { required: true })}
            type="text"
            id="name"
          />
          {errors.name && (
            <p class="mt-2 text-sm text-red-600 dark:text-red-500">
              Oops!Username you miss to fill !!
            </p>
          )}
        </div>
        <div className="mb-6">
          <label htmlFor="phone">Your Phone</label>
          <input
            {...register("phone", { required: true })}
            type="tel"
            id="phone"
            placeholder="0784143872"
          />
        </div>
        <div className="mb-6">
          <label htmlFor="email">Your email</label>
          <input
            {...register("email", { required: true })}
            type="email"
            id="email"
            placeholder="name@flowbite.com"
            required
          />
        </div>
        <div className="mb-6">
          <label htmlFor="profile">Upload file</label>
          <input
            {...register("profile", { required: true })}
            id="profile"
            accept="image/*"
            type="file"
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}