Component: PersonalInfo
Relevant source files
The following files were used as context for generating this wiki page:The PersonalInfo component is the first step in the application's multi-step form. Its primary purpose is to collect basic personal details from the user, including their name, email address, and phone number. This component is a "dumb" or presentational component, meaning it receives its data and behavior via props from a parent component, MultiStepForm.
PersonalInfo is responsible for rendering the input fields, displaying validation errors, and capturing user input. It does not manage its own state; all state management, including form data, error states, and step transitions, is handled by the MultiStepForm component. Upon successful validation, it triggers a navigation event to proceed to the next step, AddressDetails.
Sources: src/components/formsteps/PersonalInfo.jsx, src/components/MultiStepForm.jsx
Component Architecture
The PersonalInfo component is a functional React component that renders a form section. It is conditionally displayed based on the step prop.
Sources: src/components/formsteps/PersonalInfo.jsx:5-7
JSX Structure
The component's UI is defined within a main div with the class form-container. This container's visibility is controlled by the active class, which is applied when the step prop equals 1. Inside, it contains an <h2> heading and a <form> element with three input fields and a "NEXT" button.
Each input field is wrapped in a div with the form-group class and includes:
- A
<label>for the field name. - An
<input>element to capture user data. - A
<p>tag with theerror-textclass to display validation messages if an error exists for that field.
The "NEXT" button is a <button> of type="button" that triggers the handleNext function on click.
Sources: src/components/formsteps/PersonalInfo.jsx:6-52, src/styles/Form.css:1-16
Props
The component's behavior is entirely controlled by the props it receives from its parent, MultiStepForm.
| Prop | Type | Description | Source File |
|---|---|---|---|
step | number | The current step number of the form. Used to determine if this component should be active. | src/components/formsteps/PersonalInfo.jsx:5 |
formData | object | An object containing the current values of all form fields (e.g., name, email, phoneNumber). | src/components/formsteps/PersonalInfo.jsx:15 |
handleChange | func | A callback function triggered on input changes to update the formData state in the parent component. | src/components/formsteps/PersonalInfo.jsx:16 |
handleNext | func | A callback function triggered by the "NEXT" button to validate the current step and proceed to the next. | src/components/formsteps/PersonalInfo.jsx:50 |
errors | object | An object containing validation error messages for the form fields. | src/components/formsteps/PersonalInfo.jsx:17 |
Sources: src/components/formsteps/PersonalInfo.jsx:5, src/components/MultiStepForm.jsx:211-217
Data Flow and State Management
PersonalInfo operates as a controlled component, with the MultiStepForm component acting as the single source of truth for state.
The diagram below illustrates the flow of data and events between the user, PersonalInfo, and MultiStepForm.
This diagram shows that PersonalInfo receives state (formData, errors) and handlers (handleChange, handleNext) from MultiStepForm. User actions trigger these handlers, which update the state in the parent component, causing a re-render.
Sources: src/components/MultiStepForm.jsx:46-54, src/components/formsteps/PersonalInfo.jsx:16,50
Validation Logic
Input validation for the PersonalInfo step is not handled within the component itself but in the validateStep function of the parent MultiStepForm component. This function is called within handleNext before proceeding to the next step.
Sources: src/components/MultiStepForm.jsx:31-34, src/components/MultiStepForm.jsx:57-73
The following validation rules are applied when step is 1:
| Field | Validation Rule | Error Message | Source Lines (in MultiStepForm.jsx) |
|---|---|---|---|
name | Must not be empty (after trimming whitespace) | "Name is required" | 59-61 |
email | Must not be empty | "Email is required" | 62-64 |
email | Must match regex /\S+@\S+\.\S+/ | "Email is invalid" | 64-66 |
phoneNumber | Must not be empty | "Phone Number is required" | 67-69 |
phoneNumber | Must match regex /^\d{10}$/ | "Enter 10 digit phone Number" | 69-71 |
If any of these rules fail, the errors state object in MultiStepForm is populated, and the PersonalInfo component displays the corresponding error messages. The form will not advance to the next step.
Sources: src/components/MultiStepForm.jsx:57-73
User Interaction Flow
This flowchart shows the process when a user interacts with the PersonalInfo form.
Styling
The visual presentation of the PersonalInfo component is defined in src/styles/Form.css.
.form-container: The main wrapper for the form step. It has a conditional.activeclass that controls its opacity, making the current step visually prominent..form-group: A container for each label-input pair..error-input: A class applied to an<input>element when a validation error for that field exists, typically adding a red border..error-text: The class for the<p>tag that displays the validation error message in red text..next-btn: The class for the "NEXT" button, defining its colors, padding, and pill shape.
Sources: src/styles/Form.css, src/components/formsteps/PersonalInfo.jsx:17,27,40,50
Conclusion
The PersonalInfo component serves as a well-defined, reusable UI block for the first stage of the multi-step form. By delegating all logic and state management to its parent MultiStepForm, it remains simple, focused, and easy to maintain. It effectively captures essential user data, provides clear validation feedback, and controls the user's progression through the form, making it a critical entry point for the entire data submission process. The data it collects is eventually passed to the ReviewSubmit component for final confirmation.
Sources: src/components/formsteps/PersonalInfo.jsx, src/components/MultiStepForm.jsx, src/components/formsteps/ReviewSubmit.jsx