loading...
Cover image for Multi-Step Sign Up Process with React

Multi-Step Sign Up Process with React

timbogdanov profile image Tim Bogdanov Updated on ・2 min read

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

Posted on by:

timbogdanov profile

Tim Bogdanov

@timbogdanov

Developer with a focus on Full-Stack Web Applications

Discussion

pic
Editor guide