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.
Top comments (0)