Component: MultiStepForm
Relevant source files
The following files were used as context for generating this wiki page:The MultiStepForm is a stateful React component that provides a complete, four-step user data submission process. It encapsulates the entire form logic, including state management for form data, step navigation, client-side validation, and final submission to a Firebase Firestore database. The component is designed to guide the user sequentially through collecting personal information, address details, and payment information, culminating in a review and submit step.
This component serves as the main container, orchestrating the display of individual form step components (PersonalInfo, AddressDetails, PaymentInfo, ReviewSubmit). It manages the overall state and passes down data and handler functions as props to its children. The UI includes a progress bar to visually indicate the user's progress through the form.
Sources: src/components/MultiStepForm.jsx, src/App.js:7
Architecture and Component Structure
The MultiStepForm acts as a parent controller for a series of child components, each representing a single step in the form. This architecture separates the concerns of state management and UI rendering. The main component, rendered by App.js, contains all logic, while the formsteps components are primarily presentational.
Sources: src/components/MultiStepForm.jsx:10, src/App.js:7
Component Hierarchy
The diagram below illustrates the parent-child relationship between the MultiStepForm and its step components.
This diagram shows that App.js renders MultiStepForm, which in turn renders all four step components.
Sources: src/components/MultiStepForm.jsx:178-223, src/App.js:7
UI Rendering and Step Transition
Instead of conditionally rendering each step component with &&, all step components are always rendered within a wrapper. The active step is displayed to the user by manipulating the transform: translateX() CSS property on a container div. This creates a horizontal sliding animation as the user navigates between steps. The amount of translation is calculated based on the current step value.
Sources: src/components/MultiStepForm.jsx:193-196, src/styles/MultiStepForm.css:65-68
State Management
The MultiStepForm component utilizes React's useState hook to manage the form's state. There are four key state variables that control the component's behavior.
Sources: src/components/MultiStepForm.jsx:11-29
| State Variable | Type | Description | Initial Value - |
|---|---|---|---|
step | Number | Tracks the current step of the form (1-4). | 1 - |
formData | Object | Stores all user-input data across all steps. | An object with empty strings for all fields (name, email, etc.). - |
errors | Object | Holds validation error messages for the current step's fields. | {} (an empty object) - |
loading | Boolean | Indicates if the form is currently submitting data to the backend. | false - |
Sources: src/components/MultiStepForm.jsx:11-29
Form Data Structure
The formData state object aggregates all fields from the different form steps.
| Field | Step | Description |
|---|---|---|
name | 1. Personal Info | User's full name |
email | 1. Personal Info | User's email address |
phoneNumber | 1. Personal Info | User's phone number |
address | 2. Address Details | User's street address |
city | 2. Address Details | User's city |
state | 2. Address Details | User's state |
postalCode | 2. Address Details | User's postal code |
cardNumber | 3. Payment Info | User's credit card number |
expiryDateMonth | 3. Payment Info | Card expiration month |
expiryDateYear | 3. Payment Info | Card expiration year |
cvv | 3. Payment Info | Card CVV code |
Sources: src/components/MultiStepForm.jsx:13-25
Core Logic and Data Flow
The component's logic is handled by a set of functions within MultiStepForm.jsx that manage navigation, data changes, validation, and submission.
Step Navigation Flow
Navigation is controlled by the handleNext and handleBack functions, which increment or decrement the step state. Crucially, handleNext will only proceed if the current step's data is successfully validated by validateStep.
This flowchart shows the logic for moving to the next step.
Data Handling and Validation
The handleChange function updates the formData state in real-time as the user types. It also clears any existing error for the field being modified, providing immediate feedback.
The validateStep function contains the validation logic for steps 1, 2, and 3. It checks for empty fields and uses regular expressions to validate the format of email, phone number, postal code, card number, and CVV. If any validation fails, it populates the errors state object, which is then used to display error messages next to the corresponding input fields.
Sources: src/components/MultiStepForm.jsx:40-50, src/components/MultiStepForm.jsx:52-121
Validation Rules by Step
- Step 1: Personal Info
name: Requiredemail: Required, must be a valid email format (/\S+@\S+\.\S+/).phoneNumber: Required, must be 10 digits (/^\d{10}$/).
- Step 2: Address Details
address,city,state: Required.postalCode: Required, must be 5 or 6 digits (/^\d{5,6}$/).
- Step 3: Payment Info
cardNumber: Required, must be 16 digits (/^\d{16}$/).expiryDateMonth,expiryDateYear: Required.cvv: Required, must be 3 digits (/^\d{3}$/).
Sources: src/components/MultiStepForm.jsx:55-120
Form Submission
The final submission is handled by the handleSubmit async function. It sets the loading state to true, and upon successful submission to Firebase, it displays a success message using react-toastify. If an error occurs, an error toast is shown.
Submission Sequence Diagram
This diagram shows the sequence of events when a user clicks the final "SUBMIT" button.
This flow illustrates the interaction between the UI, the main component logic, and the external Firebase service.
Sources: src/components/MultiStepForm.jsx:123-148, src/components/formsteps/ReviewSubmit.jsx:50-55, src/firebase.js
Data Masking
For security, on the ReviewSubmit step, the credit card number and CVV are masked before being displayed to the user. Only the last 4 digits of the card number are shown. The actual formData object retains the full, unmasked values for submission.
// src/components/formsteps/ReviewSubmit.jsx:19-20
const maskedCardNumber = `**** **** **** ${cardNumber.slice(-4)}`;
const maskedCVV = `***`;
Sources: src/components/formsteps/ReviewSubmit.jsx:19-20
Backend Integration
The form data is persisted in a Google Firebase Firestore database.
Firebase Configuration
The connection to Firebase is configured in src/firebase.js. This file initializes the Firebase app with project-specific credentials and exports the Firestore database instance (db) for use in other components.
Sources: src/firebase.js:4-12
Data Persistence
The handleSubmit function in MultiStepForm.jsx uses the addDoc and collection functions imported from Firebase to save the formData object to a Firestore collection named formDetails.
Sources: src/components/MultiStepForm.jsx:9, src/components/MultiStepForm.jsx:127
Conclusion
The MultiStepForm component is a well-structured, self-contained module for handling complex, multi-page forms in a React application. It effectively separates state management from UI presentation, provides a clear and guided user experience with visual progress indicators and animated transitions, and includes robust client-side validation. Its integration with Firebase for data persistence makes it a complete solution for user data collection.