Component: AddressDetails
Relevant source files
The following files were used as context for generating this wiki page:The AddressDetails component is a functional React component that serves as the second step in a multi-step user registration form. Its primary responsibility is to capture the user's physical address information, including street address, city, state, and postal code. This component is designed to be a controlled component, with its state and logic managed by its parent, MultiStepForm.
It receives form data, error states, and event handlers as props from the parent. The component renders a form with input fields for the address details and provides navigation buttons to move to the previous or next step in the form sequence. Its visibility and interactivity are controlled by the step prop, ensuring it is only active during the second stage of the form process.
Sources: src/components/formsteps/AddressDetails.jsx, src/components/MultiStepForm.jsx:201-209
Component Architecture
AddressDetails is a presentational component that receives all necessary data and functions via props from the MultiStepForm container component. This separation of concerns keeps the AddressDetails component focused solely on rendering the UI for its specific step.
Sources: src/components/formsteps/AddressDetails.jsx:4-12, src/components/MultiStepForm.jsx:201-209
Props
The component's behavior is entirely dictated by the props it receives.
| Prop | Type | Description | Source File |
|---|---|---|---|
step | number | The current active step in the form. The component is active when step is 2. | [src/components/formsteps/AddressDetails.jsx:5](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/formsteps/AddressDetails.jsx#L5) |
formData | object | An object containing all form data. This component uses address, city, state, and postalCode. | [src/components/formsteps/AddressDetails.jsx:6](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/formsteps/AddressDetails.jsx#L6) |
handleChange | func | A callback function triggered on input changes to update the formData state in the parent component. | [src/components/formsteps/AddressDetails.jsx:7](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/formsteps/AddressDetails.jsx#L7) |
handleBack | func | A callback function to navigate to the previous step (Step 1: Personal Info). | [src/components/formsteps/AddressDetails.jsx:8](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/formsteps/AddressDetails.jsx#L8) |
handleNext | func | A callback function to validate the current step's data and navigate to the next step (Step 3: Payment). | [src/components/formsteps/AddressDetails.jsx:9](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/formsteps/AddressDetails.jsx#L9) |
errors | object | An object containing validation error messages for the form fields. | [src/components/formsteps/AddressDetails.jsx:10](https://github.com/mugeshm94/react-multi-step-form/blob/HEAD/src/components/formsteps/AddressDetails.jsx#L10) |
Component Rendering Logic
The following diagram illustrates how MultiStepForm conditionally renders the form steps, with AddressDetails being the second step.
This diagram shows the conditional rendering flow within MultiStepForm based on the current step value.
Sources: src/components/MultiStepForm.jsx:192-226
Data Flow and State Management
State is not managed within AddressDetails. Instead, it is lifted to the MultiStepForm component. AddressDetails acts as a controlled component, where input values and change handlers are passed down from the parent.
- State Initialization:
MultiStepForminitializes aformDatastate object with keys for all form fields, includingaddress,city,state, andpostalCode. - Data Display: The
formDataobject is passed as a prop toAddressDetails, and its properties are used to populate thevalueof the input fields. - Data Update: When a user types into an input, the
onChangeevent triggers thehandleChangefunction (passed fromMultiStepForm). This function updates theformDatastate in the parent component.
Sources: src/components/MultiStepForm.jsx:14-26, src/components/formsteps/AddressDetails.jsx:22-25
The following sequence diagram shows the data flow when a user interacts with an input field.
This diagram illustrates the unidirectional data flow for updating form state.
Sources: src/components/MultiStepForm.jsx:43-51, src/components/formsteps/AddressDetails.jsx:38-43
User Interface and Styling
The UI consists of a form with four text inputs and two navigation buttons. The styling is primarily controlled by Form.css, which defines the layout, colors, and responsive behavior.
Sources: src/components/formsteps/AddressDetails.jsx:13-81, [src/styles/Form.css]
Form Fields
| Field | name attribute | Placeholder Text |
|---|---|---|
| Address | address | "Enter address" |
| City | city | "Enter city" |
| State | state | "Choose your state" |
| Postal Code | postalCode | "Enter postal code" |
Sources: src/components/formsteps/AddressDetails.jsx:18-70
Styling Classes
.form-container: The main wrapper for the form step. It has anactiveclass whenstep === 2, which increases its opacity..form-group: A wrapper for each label-input pair..error-input: Applied to an input field when a validation error exists for it. This class adds a red border..error-text: A paragraph element to display the validation error message in red text..button-group: A flex container for the "GO BACK" and "NEXT" buttons..go-back-btn,.next-btn: Style the navigation buttons.
Sources: src/styles/Form.css:1-77, src/components/formsteps/AddressDetails.jsx:13-81
Validation Logic
Validation for the AddressDetails step is executed within the MultiStepForm component's validateStep function when the user clicks the "NEXT" button. If validation passes, the form proceeds to the next step; otherwise, an errors object is populated and passed down to AddressDetails to display the error messages.
Sources: src/components/MultiStepForm.jsx:30-34, src/components/MultiStepForm.jsx:53-122
Validation Rules (for step === 2)
| Field | Rule | Error Message |
|---|---|---|
address | Must not be empty (.trim()) | "Address is required" |
city | Must not be empty (.trim()) | "City is required" |
state | Must not be empty (.trim()) | "State is required" |
postalCode | Must not be empty (.trim()) | "Postal Code is required" |
postalCode | Must be 5 or 6 digits (/^\d{5,6}$/) | "Postal Code is invalid" |
Sources: src/components/MultiStepForm.jsx:87-98
Validation Flow
This flowchart shows the process when the "NEXT" button is clicked on the Address Details step.
Final Data Usage
The data collected by AddressDetails is displayed for confirmation in the ReviewSubmit component and ultimately saved to a Firestore database. In the review step, all collected information is shown to the user before final submission. Upon submission, the entire formData object, including the address details, is sent to the formDetails collection in Firebase.
Sources: src/components/formsteps/ReviewSubmit.jsx:10-14, 30-34, src/components/MultiStepForm.jsx:127-130, src/firebase.js:14