Build a Tab Switcher in React | Dynamic Tabs with Hooks for Interviews
Build a Tab Switcher in React | Dynamic Tabs with Hooks for Interviews
Create a React component named Tab Switcher that displays multiple tabs and allows users to switch between them. Each tab should display corresponding content when selected.
Features
Displays multiple tab buttons with clear labels.
Highlights the currently active tab visually.
Updates the displayed content dynamically when a user clicks a tab.
Maintains the active tab state internally using React hooks.
Provides meaningful attributes to facilitate automated testing.
🧾 Functionality Requirements
✅ Initial State
The component should load with the "Home" tab active by default.
The content area should display:
"Welcome to the Home tab!"
✅ Tabs
The following tabs must be rendered as horizontal buttons:
Home: Displays "Welcome to the Home tab!"
Profile: Displays "This is your Profile."
Settings: Displays "Adjust your Settings here."
✅ Switching Tabs
Clicking on a tab button switches the active tab.
The content area updates immediately to reflect the selected tab’s content.
The active tab button should have a distinct visual style (highlighted).
✅ Active Tab Styling
The active tab button should:
Use a different background color and text color.
Non-active tabs should:
Have default styling.
Include a subtle hover effect.
✅ Repeated Clicks on Active Tab
Clicking an already active tab:
Should not change the state or content.
Should retain the current content and style.
🔍 Edge Cases & Constraints
Gracefully handle:
Unexpected tab IDs.
Empty or malformed tab arrays.
Must not cause page reloads or unexpected side effects.
Must maintain state properly when tabs are clicked rapidly.
Styling should clearly distinguish between active and inactive tabs.
Component should be easily extendable to support additional tabs.
Examples of Input and Output
Initial render
➤ Content: "Welcome to the Home tab!"
Click on "Profile" tab
➤ Content: "This is your Profile."
Click on "Settings" tab
➤ Content: "Adjust your Settings here."
Click "Settings" tab again
➤ Content remains "Adjust your Settings here."
✅ Testing Requirements
Verify all tab buttons render correctly.
Verify default active tab is Home.
Verify clicking each tab updates the content correctly.
Verify the active tab button has the proper active styling.
Verify clicking the same tab multiple times retains content and active style.
Use data-testid attributes to reliably select elements during tests.
🏷️ Data Test IDs for Testing
tab-button-home — for the Home tab button
tab-button-profile — for the Profile tab button
tab-button-settings — for the Settings tab button
tab-content — for the content display area
💡 Solution Approach
Use React functional components with the useState hook to track the currently active tab.
Store tab data (id, label, content) in an array for easy mapping and rendering.
Render tab buttons dynamically using Array.map(), assigning the active class conditionally based on the active tab state.
Handle button clicks to update the active tab state, causing a re-render of the content.
Display content by finding the active tab object from the array.
Add meaningful data-testid attributes to support reliable automated testing.
Style active/inactive tabs distinctly using CSS classes.
Write tests using @testing-library/react to simulate user interaction and ensure UI updates correctly.
Use semantic HTML and ensure usability for keyboard navigation and screen readers.