How to create a custom hook for managing form state in Next.js



Image not found!!


Creating a custom hook for managing form state in Next.js involves encapsulating the form-related state and logic into a reusable function that can be easily used across components. Below is an example of a custom hook for managing form state using the useState hook from React:

jsx
// useFormData.js

import { useState } from 'react';

const useFormData = (initialState = {}) => {
  const [formData, setFormData] = useState(initialState);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const resetForm = () => {
    setFormData(initialState);
  };

  return {
    formData,
    handleChange,
    resetForm,
  };
};

export default useFormData;

Now, you can use this custom hook in your Next.js components:

jsx
// YourFormComponent.js

import React from 'react';
import useFormData from '../hooks/useFormData'; // Adjust the path based on your project structure

const YourFormComponent = () => {
  const { formData, handleChange, resetForm } = useFormData({
    // Set initial form state here
    // For example:
    // name: '',
    // email: '',
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    // Add your form submission logic here
    console.log('Form data submitted:', formData);
    resetForm();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={formData.name} onChange={handleChange} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default YourFormComponent;

In this example, the useFormData hook handles the state for the form, and it provides functions like handleChange for updating form fields and resetForm for resetting the form. You can customize the hook further to include validation, error handling, or any other form-related functionality you need.

Category List