State Management
Relevant source files
The following files were used as context for generating this wiki page:State management in the react-multi-step-form project is centralized within a single parent component, MultiStepForm.jsx. This component employs the useState hook from React to manage all application state, including the current form step, the aggregated form data, validation errors, and the loading status during submission. This "lifted state" pattern ensures a single source of truth.
The state and its modifier functions are then passed down as props to child components representing each step of the form (PersonalInfo, AddressDetails, PaymentInfo, and ReviewSubmit). These child components are responsible for rendering the UI for their respective step and communicating user interactions back up to the parent MultiStepForm component to update the state.
Core State Architecture
The entire state of the multi-step form is managed within the MultiStepForm component using four distinct state variables initialized with useState.
Sources: src/components/MultiStepForm.jsx:11-28
State Variables
| State Variable | Initial Value | Description |
|---|---|---|
step | 1 | A number that tracks the current active step in the form (1 through 4). |
formData | An object with empty string properties | An object that aggregates all user input from all steps of the form. |
errors | {} | An object that holds validation error messages for form fields. Keys correspond to formData keys. |
loading | false | A boolean flag to indicate when the form submission to Firebase is in progress. |
Sources: src/components/MultiStepForm.jsx:12-28
formData Structure
The formData state object is a flat structure that collects all fields from the different form steps.
| Field | Type | Description | Source Step |
|---|---|---|---|
name | String | User's full name. | Personal Info |
email | String | User's email address. | Personal Info |
phoneNumber | String | User's 10-digit phone number. | Personal Info |
address | String | User's street address. | Address Details |
city | String | User's city. | Address Details |
state | String | User's state. | Address Details |
postalCode | String | User's 5 or 6-digit postal code. | Address Details |
cardNumber | String | User's 16-digit credit card number. | Payment Info |
expiryDateMonth | String | Card expiry month (MM). | Payment Info |
expiryDateYear | String | Card expiry year (YYYY). | Payment Info |
cvv | String | Card's 3-digit CVV code. | Payment Info |
Sources: src/components/MultiStepForm.jsx:14-26, src/components/formsteps/PersonalInfo.jsx, src/components/formsteps/AddressDetails.jsx, src/components/formsteps/PaymentInfo.jsx
State Update Flow
The state is updated through a series of handler functions defined in MultiStepForm.jsx. These functions are triggered by user actions in the child components.
This diagram illustrates the general flow of updating state based on user input.
Input Handling (handleChange)
The handleChange function is a generic handler for all input fields across the form steps. When a user types into a field, this function is called. It updates the formData object with the new value for the corresponding field and simultaneously clears any existing validation error for that field.
Sources: src/components/MultiStepForm.jsx:40-47
Step Navigation (handleNext and handleBack)
Navigation between steps is controlled by handleNext and handleBack.
handleBack: Simply decrements thestepstate variable.handleNext: Before incrementing thestep, it callsvalidateStep(step)to ensure the fields in the current step are valid. Only if validation passes does it proceed to the next step.
Sources: src/components/MultiStepForm.jsx:29-37
The following sequence diagram shows the process of navigating from the "Personal Info" step to the "Address Details" step.
Validation (validateStep)
The validateStep function contains the validation logic for steps 1, 2, and 3. It checks the formData based on the current step and populates the errors state object if any validation rules fail. It returns true if there are no errors, and false otherwise.
- Step 1: Validates
name,email(format), andphoneNumber(10 digits). - Step 2: Validates
address,city,state, andpostalCode(5-6 digits). - Step 3: Validates
cardNumber(16 digits),expiryDateMonth,expiryDateYear, andcvv(3 digits).
Sources: src/components/MultiStepForm.jsx:54-111
Final Submission (handleSubmit)
The handleSubmit function is triggered from the ReviewSubmit component. It performs the following actions:
- Sets the
loadingstate totrue. - Performs a final validation check.
- If validation passes, it uses the
addDocfunction from Firebase to save the entireformDataobject to theformDetailscollection in Firestore. - Displays a success or error toast message.
- Sets the
loadingstate back tofalsein afinallyblock to ensure the UI is re-enabled.
Sources: src/components/MultiStepForm.jsx:113-136, src/firebase.js:13-15, src/components/formsteps/ReviewSubmit.jsx:54-58
This diagram shows the submission sequence.
State Propagation via Props
The MultiStepForm component passes down state and handlers to its children. This is how child components read the current form data and trigger state changes in the parent.
For example, the AddressDetails component receives the following props:
step: To conditionally apply styles or disable inputs.formData: To display current values in input fields.handleChange: To link to theonChangeevent of inputs.handleBack: To link to the "GO BACK" button.handleNext: To link to the "NEXT" button.errors: To display validation messages.
Sources: src/components/MultiStepForm.jsx:191-198, src/components/formsteps/AddressDetails.jsx:4-11