React MultiStep Form

Nitesh Shukla — Sat, 03 Sep 2022 14:26:17 +0000
View on CodeSandbox-
https://codesandbox.io/s/loving-pasteur-9sbip3

**1. App.js-

`import { useState } from "react";
import StepOne from "./multistepform/step1";
import StepTwo from "./multistepform/step2";
import Summary from "./multistepform/summary";
export default function App() {
  const [step, setStep] = useState(1);
  const [userdata, setUserData] = useState({
    name: "",
    email: "",
    number: "",
    description: "",
    plan: ""
  });
  const nextStep = () => {
    setStep(step + 1);
  };
  const handleForm = (e) => {
    let { name, value } = e.target;
    setUserData({ ...userdata, [name]: value });
  };
  switch (step) {
    case 1:
      return (
        <StepOne next={nextStep} formdata={handleForm} userdata={userdata} />
      );
    case 2:
      return <StepTwo next={nextStep} userdata={userdata} />;
    case 3:
      return <Summary userdata={userdata} />;
    default:
      return (
        <div>
          <h1 className="text-center mb-5 ">Hello User</h1>
        </div>
      );
  }
}
`
Step2-

`function StepOne({ next, formdata, userdata }) {
  const handleChange = (e) => {
    formdata(e);
  };
  const handleSubmit = (e) => {
    e.preventDefault();

    if (
      userdata?.name !== "" &&
      userdata?.email !== "" &&
      userdata?.number !== "" &&
      userdata?.description !== ""
    ) {
      next();
    } else {
      alert("All Fields Are required");
    }
  };
  return (
    <div className="container ">
      <h1 className="text-center mb-5 ">From</h1>
      <form
        className="w-75 block mx-auto my-5"
        onSubmit={(e) => {
          handleSubmit(e);
        }}
      >
        <div className="mb-3">
          <div className="form-label">Name</div>
          <input
            className="form-control"
            type="text"
            placeholder="Enter Name"
            name="name"
            value={userdata.name}
            onChange={(e) => {
              handleChange(e);
            }}
          />
        </div>
        <div className="mb-3">
          <div className="form-label">Email address</div>
          <input
            className="form-control"
            type="email"
            placeholder="Enter email"
            name="email"
            value={userdata.email}
            onChange={(e) => {
              handleChange(e);
            }}
          />
        </div>
        <div className="mb-3">
          <div className="form-label">Number</div>
          <input
            className="form-control"
            type="number"
            placeholder="Enter number"
            name="number"
            value={userdata.number}
            onChange={(e) => {
              handleChange(e);
            }}
          />
        </div>
        <div className="mb-3">
          <div className="form-label">Description</div>
          <textarea
            className="form-control"
            as="textarea"
            rows={5}
            name="description"
            value={userdata.description}
            onChange={(e) => {
              handleChange(e);
            }}
          />
        </div>
        <button className="btn btn-primary" type="submit">
          Next
        </button>
      </form>
    </div>
  );
}

export default StepOne;
`
`const data = [
  {
    id: "1",
    Price: "$5",
    Type: "Basic"
  },
  {
    id: "2",
    Price: "$20",
    Type: "Standerd"
  },
  {
    id: "3",
    Price: "$50",
    Type: "Premium"
  }
];
function StepTwo({ next, userdata }) {
  const selectSubscription = (value) => {
    userdata.plan = value;
    next();
  };
  return (
    <div className="container mt-5">
      <h1 className="text-center mb-5 ">Choose your plan</h1>

      <div className="row row-cols-1 row-cols-md-3 g-4">
        {data.map((item, idx) => (
          <div
            className="col"
            key={idx}
            onClick={() => {
              selectSubscription(item.Type);
            }}
          >
            <div className="card">
              <div className="card-body">
                <h5 className="card-title">{item.Price}</h5>
                <h4>{item.Type}</h4>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default StepTwo;
`
Details--

`import React from "react";

const Summary = ({ userdata }) => {
  return (
    <div className="container mt-5">
      <div className=" block mx-auto w-xl-50 w-lg-50 w-md-50">
        <h1 className="text-center mb-5 ">Details</h1>
        <div className="pb-2 mb-4 text-dark border-bottom border-secondary d-flex align-items-center justify-content-between">
          <h3>Name</h3>
          <h4>{userdata.name}</h4>
        </div>
        <div className="pb-2 mb-4 text-dark border-bottom border-secondary d-flex align-items-center justify-content-between">
          <h3>Email</h3>
          <h4>{userdata.email}</h4>
        </div>
        <div className="pb-2 mb-4 text-dark border-bottom border-secondary d-flex align-items-center justify-content-between">
          <h3>Number</h3>
          <h4>{userdata.number}</h4>
        </div>
        <div className="pb-2 mb-4 text-dark border-bottom border-secondary d-flex align-items-center justify-content-between">
          <h3>Description</h3>
          <h4>{userdata.description}</h4>
        </div>
        <div className="pb-2 mb-4 text-dark border-bottom border-secondary d-flex align-items-center justify-content-between">
          <h3>Plan</h3>
          <h4>{userdata.plan}</h4>
        </div>
      </div>
    </div>
  );
};
export default Summary;
`
Build a Modal Component with React

Nitesh Shukla — Wed, 13 Oct 2021 05:38:42 +0000
"https://codesandbox.io/s/obixu?file=/src/styles.css"
Simple Responsive Contact Form

Nitesh Shukla — Sun, 10 Oct 2021 02:40:57 +0000
DEV Community: Nitesh Shukla

React MultiStep Form

Build a Modal Component with React

Simple Responsive Contact Form
