DEV Community

Cover image for Multi-Step Sign Up Process with React
Tim Bogdanov
Tim Bogdanov

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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: '',
};
Enter fullscreen mode Exit fullscreen mode

And inside the UserForm component set the state:

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

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 });
  };
Enter fullscreen mode Exit fullscreen mode

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;
  }
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)