React Multi-Step Form Implementation

This challenge asks you to build a multi-step form in React using TypeScript. Multi-step forms are commonly used to break down complex data entry into manageable chunks, improving user experience and completion rates. This exercise will test your understanding of React state management, component composition, and form handling.

Problem Description

You need to create a React component that renders a multi-step form. The form should be divided into three distinct steps: "Personal Information," "Address," and "Confirmation." Each step should contain a set of input fields relevant to that step. The user should be able to navigate between steps using "Next" and "Previous" buttons (disabled appropriately based on the current step). Upon completing all steps, a "Submit" button should appear, which, when clicked, displays the collected data in a formatted manner.

Key Requirements:

Step Navigation: Implement "Previous" and "Next" buttons to move between steps. The "Previous" button should be disabled on the first step, and the "Next" button should be disabled on the last step until all required fields in the current step are filled.
Input Validation: Basic input validation is required. Each input field should have a required attribute. The "Next" button should be disabled if any required field is empty.
State Management: Use React's useState hook to manage the form data and the current step.
Component Structure: Break down the form into smaller, reusable components for each step.
Data Display: Upon submission (clicking the "Submit" button on the confirmation step), display the collected data in a readable format.
TypeScript: The entire solution must be written in TypeScript.

Expected Behavior:

The form initially displays the "Personal Information" step.
The user fills in the required fields in each step.
The "Next" button becomes enabled when all required fields in the current step are filled.
Clicking "Next" moves the user to the next step.
Clicking "Previous" moves the user to the previous step.
On the "Confirmation" step, a "Submit" button appears.
Clicking "Submit" displays the collected data.
The form should handle empty required fields gracefully by disabling the "Next" button.

Edge Cases to Consider:

Empty required fields.
Navigation between steps (first and last steps).
Handling potential errors during submission (although error handling beyond basic validation is not required for this challenge).
Ensure the form data is correctly stored and displayed.

Examples

Example 1:

Input: User fills in all required fields in "Personal Information" and clicks "Next".
Output: The form displays the "Address" step.
Explanation: The state updates to reflect the current step as "Address", and the component re-renders to show the new step.

Example 2:

Input: User is on the "Confirmation" step and clicks "Submit" after filling all fields.
Output: A formatted display of the collected data (e.g., "Name: John Doe, Address: 123 Main St").
Explanation: The collected data from the state is extracted and formatted for display.

Example 3:

Input: User is on the "Personal Information" step and leaves a required field empty.
Output: The "Next" button is disabled.
Explanation: The validation logic prevents the user from proceeding to the next step until all required fields are filled.

Constraints

Number of Steps: The form must have exactly three steps: "Personal Information," "Address," and "Confirmation."
Input Fields: Each step should have at least two input fields. The specific fields are up to you, but they should be relevant to the step's title.
Data Types: All input fields should be of type string.
Performance: The solution should be performant enough to render and update the form smoothly without noticeable lag. Optimization is not a primary focus, but avoid unnecessary re-renders.
Dependencies: You are allowed to use standard React hooks (useState, etc.) and basic HTML elements. No external UI libraries (e.g., Material UI, Bootstrap) are permitted.

Notes

Consider using functional components and hooks for state management.
Think about how to structure your components to promote reusability.
Focus on clear and readable code.
The formatting of the displayed data on the "Confirmation" step is up to you, but it should be easily understandable.
This challenge primarily focuses on the structure and navigation of the multi-step form. Advanced validation or submission handling is not required. The core goal is to demonstrate your ability to manage state and control the flow of a multi-step form in React with TypeScript.