Create a Tabs Component

React

JavaScript

Technical Specification

Build a Tabs component that switches visible content when a tab is clicked.

Input/Output Samples

Input:Click 'Profile' tab

Output:Profile content visible

Optimal Logic Path

import { useState } from "react";

const TABS = [
  { id: "overview", label: "Overview", content: "Overview content" },
  { id: "profile", label: "Profile", content: "Profile content" },
  { id: "settings", label: "Settings", content: "Settings content" }
];

function Tabs() {
  const [active, setActive] = useState("overview");
  const current = TABS.find((t) => t.id === active);

  return (
    <div>
      <div>
        {TABS.map((t) => (
          <button
            key={t.id}
            onClick={() => setActive(t.id)}
          >
            {t.label}
          </button>
        ))}
      </div>
      <div>{current?.content}</div>
    </div>
  );
}

Architectural Deep-Dive

We store which tab is active and use it to switch the content area.