Multi-Step Sign Up Process with React

Finished result: Multi-Step Sign Up Process

Setting up the UserForm container

I usually start all my react projects by running
npx create-react-app my-app. After I've taken care of that I'll start by creating a UserForm.js file. this will house all of our components for each step in the multi-step sign up process.

if you have ES7 React/Redux/GraphQL/React-Native snippets
installed, just type rafce and hit tab. This will create a simple react arrow function component template. Like so:

import React from 'react'

const UserForm = () => {
  return (
    <div>

    </div>
  )
}

export default UserForm

Once that is set up, lets start by create a state object that will hold out step number and each detail we'd like to collect. Like so:

const initialState = {
  // Step counter will start at step 1 by default
  step: 1,

  companyName: '',
  companyEmail: '',
  companyPhone: '',

  cardholderName: '',
  cardNumber: '',
  expMonth: '',
  expYear: '',
  securityCode: '',
  address: '',
  address2: '',
  city: '',
  state: '',
  zip: '',
};

And inside the UserForm component set the state:

// Initialize form state with initialState object
const [form, setForm] = useState(initialState);

Next we'll need 2 functions that will handle the button click of Next Step and Previous Step:

  // Proceed to the next step
  const nextStep = (e) => {
    setForm({ ...form, step: form.step + 1 });
  };

  // Go back to previous step
  const previousStep = () => {
    setForm({ ...form, step: form.step - 1 });
  };

Next we need to use the switch and case and set up a sase statement for each step.:

// You can create as many steps as your like and store them in separate components.
switch (form.step) {
    case 1:
      return (
        <FromUserDetails
          nextStep={nextStep}
          handleInput={handleInput}
          form={form}
        />
      );

    case 2:
      return (
        <FormPersonalDetails
          nextStep={nextStep}
          previousStep={previousStep}
          handleInput={handleInput}
          form={form}
        />
      );

    case 3:
      return <FormSuccess />;

    default:
      return;
  }

Make sure to pass in the nextStep and previousStep functions into each step component. Also don't forget to create a Finished Component to let the user know that they completed the process.

Inside of each step component you can set up the inputs and handle changes.

Vector Illustration