Simple Tabs

Problem Statement

Tabs are widely used to organize page content into distinct groups. By switching between tabs, users can read different sections of content without leaving the page.

In this challenge, you will build a clean, basic tabs component in React that lets users switch between different panels of content on click.

Requirements

Functional

• Dynamic Items: The component must receive an array of tab items as a prop. Each tab item is an object containing id (string), label (string), and content (ReactNode).
• Default Selection: By default, the first tab in the array must be selected when the page loads.
• Switch Tab: Clicking on a tab header must switch the active panel to display the selected tab's content.
• Active Styling: The active tab header button must be visually highlighted.

Non-Functional

• The component must handle cases where the input list is empty gracefully.
• Ensure clear layout separation between the tab headers and the content panel.

Concepts Tested

• Storing selection IDs in state using useState.
• Iterating over lists using the map() method in JSX.
• Using string interpolation or conditional checks to apply active classes.
• Conditional rendering in React.