Mukltipage form example

Example.jsx

import React, { useState } from 'react';

const RegistrationForm = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    // Add more form fields as needed
  });

  const nextPage = () => {
    setCurrentPage(currentPage + 1);
  };

  const previousPage = () => {
    setCurrentPage(currentPage - 1);
  };

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

  const handleSubmit = (event) => {
    event.preventDefault();
    // Perform form submission logic
    console.log(formData);
    // Reset form data
    setFormData({
      name: '',
      email: '',
      password: '',
    });
    setCurrentPage(1);
  };

  // Render different pages based on the current page state
  const renderPage = () => {
    switch (currentPage) {
      case 1:
        return (
          <div>
            <h2>Page 1</h2>
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
              placeholder="Enter your name"
            />
            <button onClick={nextPage}>Next</button>
          </div>
        );
      case 2:
        return (
          <div>
            <h2>Page 2</h2>
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              placeholder="Enter your email"
            />
            <button onClick={previousPage}>Previous</button>
            <button onClick={nextPage}>Next</button>
          </div>
        );
      case 3:
        return (
          <div>
            <h2>Page 3</h2>
            <input
              type="password"
              name="password"
              value={formData.password}
              onChange={handleChange}
              placeholder="Enter your password"
            />
            <button onClick={previousPage}>Previous</button>
            <button onClick={handleSubmit}>Submit</button>
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div>
      <h1>Registration Form</h1>
      {renderPage()}
    </div>
  );
};

export default RegistrationForm;