Data Flow

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/MultiStepForm.jsx
• src/firebase.js
• src/components/formsteps/ReviewSubmit.jsx
• src/components/formsteps/PersonalInfo.jsx
• src/components/formsteps/AddressDetails.jsx
• src/components/formsteps/PaymentInfo.jsx
• src/App.js

The data flow in this application is centered around a single parent component, MultiStepForm, which manages the state for a multi-step user registration process. This component controls the flow of data from user input through various child components, handles validation at each step, and ultimately submits the complete dataset to a Firestore database. The architecture follows a unidirectional data flow pattern, where state is passed down from parent to child components as props, and state updates are communicated back up through callback functions.

The process is divided into four distinct steps: Personal Information, Address Details, Payment Information, and a final Review & Submit stage. Data is collected and validated incrementally before being persisted. This ensures a clean separation of concerns and a robust user experience.

Component Architecture and State Management

The core of the application's data management resides within the MultiStepForm.jsx component. This component acts as a single source of truth, holding the application's primary state objects and orchestrating the interactions between the form step components.

Sources: src/App.js:9, src/components/MultiStepForm.jsx:10-30

Central State

MultiStepForm initializes and manages three key state variables using React's useState hook:

• step: A number that tracks the current active step in the form (1 through 4).
• formData: An object that aggregates all user input from all steps.
• errors: An object that stores validation error messages for the current step's fields.
• loading: A boolean to track the submission status to Firebase.

Sources: src/components/MultiStepForm.jsx:11-28

The structure of the formData object is predefined to hold all possible fields from the form.

Key	Type	Description	Source File
name	String	User's full name.	MultiStepForm.jsx
email	String	User's email address.	MultiStepForm.jsx
phoneNumber	String	User's 10-digit phone number.	MultiStepForm.jsx
address	String	User's street address.	MultiStepForm.jsx
city	String	User's city.	MultiStepForm.jsx
state	String	User's state.	MultiStepForm.jsx
postalCode	String	User's postal code.	MultiStepForm.jsx
cardNumber	String	User's 16-digit credit card number.	MultiStepForm.jsx
expiryDateMonth	String	Card's expiration month.	MultiStepForm.jsx
expiryDateYear	String	Card's expiration year.	MultiStepForm.jsx
cvv	String	Card's 3-digit CVV code.	MultiStepForm.jsx

Table based on state initialization in src/components/MultiStepForm.jsx:13-25.

Component Hierarchy

The MultiStepForm component renders all step components (PersonalInfo, AddressDetails, PaymentInfo, ReviewSubmit) simultaneously but uses CSS transforms to show only the active step. It passes down the formData, errors, and various handler functions as props.

This diagram shows the component hierarchy and prop drilling.

User Input and State Updates

Data enters the system via user interaction with <input> and <select> elements within the step components like PersonalInfo.jsx and AddressDetails.jsx.

The handleChange Function

The handleChange function is the primary mechanism for updating the central formData state. It is defined in MultiStepForm and passed down to each step component that contains input fields.

1. When a user types into a field, the onChange event is triggered.
2. The handleChange function is called with the event object.
3. It updates the formData object by using the input's name attribute as the key and its value as the new value.
4. Crucially, it also clears any existing validation error for that specific field in the errors state object.

Sources: src/components/MultiStepForm.jsx:42-50, src/components/formsteps/PersonalInfo.jsx:15-17

The following sequence diagram illustrates this flow:

Data Validation

Validation is performed within MultiStepForm before navigating to the next step. The validateStep function is called by handleNext and contains the logic specific to the fields of the current step.

Sources: src/components/MultiStepForm.jsx:30-34, src/components/MultiStepForm.jsx:52-125

Validation Flow

When the user clicks "NEXT", the following occurs:

1. handleNext is invoked.
2. handleNext calls validateStep(step).
3. validateStep checks the formData fields corresponding to the current step. It uses string checks and regular expressions to validate the data.
4. If any validation fails, a newErrors object is populated.
5. setErrors(newErrors) is called, updating the state. The child components re-render to display the error messages.
6. If newErrors is empty, validateStep returns true, and handleNext proceeds to increment the step via setStep(step + 1).

The flowchart below details the validation logic for Step 2 (Address Details).

Data Submission

The final step in the data flow is submission to an external service. This application uses Google Firebase's Firestore to persist the form data.

Sources: src/firebase.js, src/components/MultiStepForm.jsx:127-151

Firebase Integration

The Firebase configuration is initialized in src/firebase.js. It exports the db instance and Firestore functions like collection and addDoc.

// src/firebase.js:3-11
const firebaseConfig = {
  apiKey: "AIzaSyAoEkweCEECJa2dE9zL5euJuwaUU-zJ3lY",
  authDomain: "react-multi-step-form-3706c.firebaseapp.com",
  projectId: "react-multi-step-form-3706c",
  storageBucket: "react-multi-step-form-3706c.appspot.com",
  messagingSenderId: "909707174433",
  appId: "1:909707174433:web:91d6a8bd6b31b91a61b960"
};

Sources: src/firebase.js:3-11

Submission Sequence

The handleSubmit function in MultiStepForm is triggered from the ReviewSubmit component.

1. The user clicks the "SUBMIT" button in the ReviewSubmit component.
2. handleSubmit is called. It sets the loading state to true.
3. It performs a final validation check.
4. If validation passes, it calls addDoc to save the entire formData object to the formDetails collection in Firestore.
5. On success, a success toast notification is displayed. On failure, an error toast is shown.
6. The loading state is set back to false in a finally block.

Sources: src/components/MultiStepForm.jsx:127-151, src/components/formsteps/ReviewSubmit.jsx:59-65

The following sequence diagram illustrates the submission process.

Conclusion

The data flow of the React Multi-Step Form is a well-defined, centralized process managed by the MultiStepForm component. It employs a unidirectional data flow, passing state down to child components and receiving updates via callbacks. Data is collected, validated incrementally at each step, and finally persisted to Firestore upon user confirmation. This architecture ensures data integrity, provides a clear separation of concerns, and maintains a predictable state throughout the user's journey.