Lesson 15 — Tabs UI

Tabs: one state, many views

A tab bar stores the active tab in state. Each button sets it; the content area shows the text that belongs to that tab. Looking the content up in an object (content[tab]) keeps it short no matter how many tabs you add.

const prices = { small: 3, large: 5 };
<p>{prices[size]}</p>

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: settings pages, product details and dashboards all use tabs.