Build a reusable React tabbed form where users can switch between multiple tabs without losing the information they have already entered.
The form contains multiple tabs representing different sections of a profile:
- Personal — Name and email
- Address — City and postal code
- Preferences — Job title and experience
Users should be able to freely switch between tabs while filling out the form. Any information entered into one tab must remain intact when the user navigates to another tab and then returns.
Current Problems
The existing implementation has several bugs related to React state management and controlled form inputs.
Your task is to debug the implementation so that:
- Switching between tabs does not reset the fields in the previous tab.
- Text entered into each field remains available after switching tabs.
- Each input correctly reflects its current value.
- Updating a field does not accidentally overwrite values from other fields.
- Switching tabs only changes the visible section and does not reset the form state.
- The active tab is correctly highlighted.
- The correct tab content is displayed after switching.
- All form fields remain controlled React inputs.
- Empty fields are preserved when navigating between tabs.
Expected Behavior
For example:
- Open the Personal tab.
- Enter
John into the name field.
- Enter
john@example.com into the email field.
- Switch to Address.
- Enter
Hyderabad as the city.
- Switch back to Personal.
John and john@example.com should still be present.- Switch back to Address.
Hyderabad should still be present.
The same behavior should work for every tab and every form field.
Requirements
- Use React state to maintain the form data.
- Keep the form state at a level that survives tab switching.
- Do not rely on the DOM to preserve input values.
- Do not use page reloads or browser storage to solve the problem.
- Switching tabs must not reset previously entered values.
- The component should remain reusable and maintainable.
Files to Modify
Modify the provided React component implementation to fix the broken behavior.
Do not modify the test files.
Acceptance Criteria
The solution is correct when:
- All tabs can be switched between freely.
- No previously entered value is lost.
- Each field maintains its own value.
- Editing one field does not clear or overwrite unrelated fields.
- The active tab always displays the correct content.
- All provided tests pass.