Component composition

One card, any content inside

A shop page is full of boxes that look alike: a product card, a signed-in card, an order summary. They share a border, some padding, and rounded corners, and hold completely different things. You could write one component per box. Or you could write one Card that draws only the frame, and let each page decide what goes inside. That second way is composition: building a screen by putting components inside other components. Click the button in the result.

1import { useState } from "react";2 3function Card({ children }) {4  return <div className="card">{children}</div>;5}6 7export default function App() {8  const [signedIn, setSignedIn] = useState(true);9 10  return (11    <>12      <Card>13        <h3>Green tea</h3>14        <p>$4 · fresh and light</p>15      </Card>16      <Card>17        <p>{signedIn ? "Signed in as Asha" : "Signed out"}</p>18        <button onClick={() => setSignedIn(!signedIn)}>19          {signedIn ? "Sign out" : "Sign in"}20        </button>21      </Card>22    </>23  );24}

Lines 3 to 5 are the whole Card. It takes one prop, children, and puts it inside a <div className="card">. React fills children with whatever you write between <Card> and </Card>, as the Props lesson showed. Lines 12 to 15 give the first card a heading and a price. Lines 16 to 21 give the second a sentence and a button.

Press Sign out. The sentence and the button change, and Card had nothing to do with it. The content on lines 17 to 20 is written inside App, so it reads App's state, signedIn on line 8, directly. Card never sees signedIn, and never needs a prop for it. That is the first thing composition gives you: a component that wraps content doesn't have to know anything about it.

Named slots: props that hold elements

children gives a component one area to fill. Many components have more than one: a card has a title at the top, content in the middle, and buttons at the bottom. Each area can be its own prop. Because JSX makes an ordinary JavaScript object, an element, any prop can hold it, not only children. A prop that holds elements for one area is often called a slot.

1function Card({ title, actions, children }) {2  return (3    <section className="card">4      <header>{title}</header>5      {children}6      {actions && <footer className="actions">{actions}</footer>}7    </section>8  );9}10 11export default function App() {12  return (13    <>14      <Card15        title={<h3>Green tea</h3>}16        actions={<button>Add to cart</button>}17      >18        <p>$4 · fresh and light</p>19      </Card>20      <Card title={<h3>Your order <span className="badge">2 items</span></h3>}>21        <p>Total: $9</p>22      </Card>23    </>24  );25}

Line 1 takes three props: title, actions, and children. Line 4 places title in a <header>, line 5 places the children under it, and line 6 places actions in a <footer>. The first card fills all three: its title on line 15 is an <h3> element, its actions on line 16 are a button, and its children on line 18 are the price.

The second card, on lines 20 to 22, passes no actions. Line 6 checks with &&: when actions is undefined, React draws nothing there, not even an empty footer with its border. Its title holds more than text: a heading with a badge inside. A string prop like title="Your order" couldn't hold that badge; a slot can hold any markup.

Press Edit & run and give the second card two buttons in one slot. On line 20, before the > at the end, add actions={<><button>Checkout</button><button>Keep shopping</button></>}. A Fragment, <>…</>, groups the two buttons into one value. The footer appears with both buttons, and Card didn't change.

How to read this table: each row is something a component needs to receive, and the way to pass it.

Composition vs configuration: a card with too many props

The other way to make one component serve many pages is configuration: the component draws everything itself, and props switch parts on and off. It starts small. Then the cart page wants a smaller card, the wishlist wants different buttons, the shop wants a badge, and each request adds a prop. A component that has grown a prop for every page that uses it is sometimes called a god component: it knows about everything. Here is one, with its three users. Open the ProductCard.jsx tab, and click the buttons in the result.

1import { useState } from "react";2import ProductCard from "./ProductCard.jsx";3 4const chai = { name: "Chai", price: 5, rating: 4.5 };5 6export default function App() {7  const [count, setCount] = useState(0);8  const add = () => setCount(count + 1);9  const remove = () => setCount(Math.max(count - 1, 0));10 11  return (12    <>13      <p>In cart: {count}</p>14      <h4>Shop page</h4>15      <ProductCard product={chai} showRating showBadge badgeText="Sale" onAdd={add} />16      <h4>Cart page</h4>17      <ProductCard product={chai} compact showAddButton={false} showRemoveButton onRemove={remove} />18      <h4>Wishlist page</h4>19      <ProductCard20        product={chai}21        showPrice={false}22        addButtonText="Move to cart"23        showRemoveButton24        onAdd={add}25        onRemove={remove}26      />27    </>28  );29}

In ProductCard.jsx, lines 2 to 12 list the props: the product, six on/off switches (showPrice, showRating, showBadge, showAddButton, showRemoveButton, and compact), two texts, and two handlers. Lines 15 to 23 check them one by one: every && is a part that may or may not show.

In App.jsx, line 15 is the shop page, line 17 the cart page, and lines 19 to 26 the wishlist page. Read line 17: showAddButton={false} showRemoveButton. To know what that card looks like, you have to open ProductCard.jsx and run the checks in your head. Six switches can be set in 2 × 2 × 2 × 2 × 2 × 2 = 64 ways. Most of them no page uses, but each one is a card that someone could ask for, and that a change to ProductCard could break.

Now the same three cards, composed. Card.jsx holds two small parts, and each page writes the parts it shows:

1import { useState } from "react";2import { Card, CardTitle } from "./Card.jsx";3 4const chai = { name: "Chai", price: 5, rating: 4.5 };5 6export default function App() {7  const [count, setCount] = useState(0);8  const add = () => setCount(count + 1);9  const remove = () => setCount(Math.max(count - 1, 0));10 11  return (12    <>13      <p>In cart: {count}</p>14      <h4>Shop page</h4>15      <Card>16        <CardTitle badge="Sale">{chai.name}</CardTitle>17        <p>${chai.price}</p>18        <p>Rated {chai.rating} of 5</p>19        <button onClick={add}>Add to cart</button>20      </Card>21      <h4>Cart page</h4>22      <Card compact>23        <CardTitle>{chai.name}</CardTitle>24        <p>${chai.price}</p>25        <button onClick={remove}>Remove</button>26      </Card>27      <h4>Wishlist page</h4>28      <Card>29        <CardTitle>{chai.name}</CardTitle>30        <button onClick={add}>Move to cart</button>31        <button onClick={remove}>Remove</button>32      </Card>33    </>34  );35}

In Card.jsx, Card on lines 1 to 3 draws the frame, with one real option, compact. CardTitle on lines 5 to 12 draws the heading, with a badge slot. In App.jsx, lines 15 to 20 are the shop page: a title with a badge, the price, the rating, and a button. Lines 22 to 26 are the cart page, and lines 28 to 32 the wishlist. Each call site reads like the card it draws. The result is the same as before, text for text and button for button.

Press Edit & run and add <p>Only 3 left</p> under line 18. The shop card shows it; the other two don't change, and neither does Card.jsx. In the configured version, the same request means a showStock prop in ProductCard.jsx, a seventh switch, and 128 combinations. The playground runs four such requests through both versions:

Press Next request four times. The configured card goes from 11 props to 18, and from 64 combinations to 1024. Every new prop lives in the one file every page shares. The composed side never touches Card.jsx: each request is one change, on the page that asked for it. The last request needs a QuantityStepper, a new small component; it goes inside the card on the cart page, like any other part.

Configuration isn't always wrong. A button's size, with three fixed choices that must look the same everywhere, belongs in a prop. Problems start when props describe content or layout that each page wants differently. How to read this table: each row is a question, answered for both ways.

Compound components share state through context

Slots work when the parts are independent. Some parts aren't: a row of tabs and the panels under them must agree on which tab is open. One way is configuration again, with every tab described in one array prop:

<Tabs
  defaultId="details"
  items={[
    { id: "details", label: "Details", content: <p>Chai: black tea…</p> },
    { id: "reviews", label: "Reviews (2)", content: <Reviews /> },
    { id: "shipping", label: "Shipping", content: <p>Ships in 2 days…</p> },
  ]}
/>

It works until a page wants a badge on one tab, a disabled tab, or a sale banner between the tabs and the panels. Each needs a new key in items, and new code in Tabs. The composed way splits the widget into compound components: a set of parts that only work together, here Tabs, TabList, Tab, and TabPanel. The page arranges them freely, and the parts share their state in secret, through context. Click the tabs, then open the Tabs.jsx tab.

1import { Tabs, TabList, Tab, TabPanel } from "./Tabs.jsx";2 3export default function App() {4  return (5    <Tabs defaultValue="details">6      <TabList>7        <Tab value="details">Details</Tab>8        <Tab value="reviews">Reviews (2)</Tab>9        <Tab value="shipping">Shipping</Tab>10      </TabList>11      <TabPanel value="details">12        <p>Chai: black tea with ginger and cardamom.</p>13      </TabPanel>14      <TabPanel value="reviews">15        <p>Warm and spicy. (Asha)</p>16        <p>My morning cup. (Ravi)</p>17      </TabPanel>18      <TabPanel value="shipping">19        <p>Ships in 2 days. Free over $20.</p>20      </TabPanel>21    </Tabs>22  );23}

In App.jsx, line 5 opens Tabs with defaultValue="details". Lines 6 to 10 are the row of tabs, and lines 11 to 20 the three panels. Each Tab and TabPanel has a value; a tab and a panel with the same value belong together.

Now Tabs.jsx, from the top:

• Line 3 creates TabsContext. Lines 5 to 9 are Tabs: it keeps the open value in state (line 6) and provides it, with the setter and an id from useId, to everything inside (line 8). Tabs draws no markup of its own.
• Lines 11 to 15 are useTabs, a small custom hook every part calls. Outside a Tabs, useContext returns the default, null, and line 13 throws a clear error instead of letting the part fail somewhere later.
• Lines 21 to 34 are Tab: a button that is selected when its value matches the shared one (line 27) and sets it when clicked (line 29). Lines 36 to 48 are TabPanel: hidden unless its value is the open one (line 43).
• role="tab", aria-selected, role="tabpanel", and the ids that link each tab to its panel tell screen readers what the parts are. A complete tabs widget also moves between tabs with the arrow keys; the Accessible React components lesson covers keyboard support.

Press Edit & run. Under line 20, the last </TabPanel>, add a panel: <TabPanel value="brewing"><p>Simmer for 4 minutes with milk.</p></TabPanel>. Then, under line 9, add a tab: <Tab value="brewing">Brewing</Tab>. A fourth tab works, and Tabs.jsx didn't change. You can also put any markup between the parts, like a sale notice between </TabList> and the first panel: the parts find their context at any depth.

Inversion of control: let the caller decide

In every example so far, the component gave a decision back to the code that uses it: what goes inside the card, which parts the product card has, in what order the tabs and panels sit. Handing decisions to the caller is called inversion of control. The component keeps the behavior that must always be right, and the caller decides the rest. Two more decisions are often handed over: who owns the state, and how each item of a list is drawn.

Here the product page needs a Read the 2 reviews button, outside the tabs, that opens the Reviews tab. The tabs keep their open value inside Tabs, where nothing outside can reach it. So Tabs learns to be controlled, like an <input> with value and onChange (the Sharing state lesson explains controlled and uncontrolled components). Click the button and the tabs:

1import { useState } from "react";2import { Tabs, TabList, Tab, TabPanel } from "./Tabs.jsx";3 4export default function App() {5  const [tab, setTab] = useState("details");6 7  return (8    <>9      <button onClick={() => setTab("reviews")}>Read the 2 reviews</button>10      <p>Open tab: {tab}</p>11      <Tabs value={tab} onValueChange={setTab}>12        <TabList>13          <Tab value="details">Details</Tab>14          <Tab value="reviews">Reviews (2)</Tab>15        </TabList>16        <TabPanel value="details">17          <p>Chai: black tea with ginger and cardamom.</p>18        </TabPanel>19        <TabPanel value="reviews">20          <p>Warm and spicy. (Asha)</p>21          <p>My morning cup. (Ravi)</p>22        </TabPanel>23      </Tabs>24    </>25  );26}

In App.jsx, line 5 keeps the open tab in App's own state. Line 9 sets it from a button outside the tabs, line 10 shows it, and line 11 passes it down as value, with setTab as onValueChange. Clicking Read the 2 reviews opens Reviews; clicking a tab updates the text on line 10.

In Tabs.jsx, only Tabs changed (lines 5 to 21). Line 7 checks whether the caller passed a value. Line 8 uses it if so, and its own state if not, so the tabs from the previous section, with only defaultValue, still work. When a tab is clicked, select on lines 11 to 14 updates its own state only when nobody controls it, and always tells the caller through onValueChange, with optional chaining in case there is none.

Press Edit & run and delete onValueChange={setTab} from line 11. Now click a tab: nothing happens. The page controls the value and never changes it, just like an <input value> without onChange. Control comes with a duty: whoever owns the state must update it.

The other decision a component can hand over is how each item is drawn. SearchList below owns the searching: the text box, the filtering, the empty message, the list and its keys. The caller passes a function that returns JSX, renderItem, and SearchList calls it once per item. Type mint, then xyz, in the box:

1import { useState } from "react";2 3const teas = [4  { id: 1, name: "Green tea", price: 4 },5  { id: 2, name: "Chai", price: 5 },6  { id: 3, name: "Mint tea", price: 3 },7];8 9function SearchList({ items, renderItem, empty }) {10  const [query, setQuery] = useState("");11  const shown = items.filter((item) =>12    item.name.toLowerCase().includes(query.toLowerCase()),13  );14 15  return (16    <>17      <input18        aria-label="Search teas"19        value={query}20        onChange={(e) => setQuery(e.target.value)}21      />22      {shown.length === 0 ? (23        empty24      ) : (25        <ul>26          {shown.map((item) => (27            <li key={item.id}>{renderItem(item)}</li>28          ))}29        </ul>30      )}31    </>32  );33}34 35export default function App() {36  return (37    <SearchList38      items={teas}39      renderItem={(tea) => <>{tea.name}: <strong>${tea.price}</strong></>}40      empty={<p>No teas match. Try chai.</p>}41    />42  );43}

Line 9 takes the items, renderItem, and an empty slot. Lines 11 to 13 keep only the names that contain the text. Line 23 shows the empty slot when nothing matches, and line 27 calls renderItem(item) for each row. On line 39, the caller decides that a row is a name and a price; on line 40, what the empty message says.

Press Edit & run and change line 39 to renderItem={(tea) => <button>Add {tea.name}</button>}. Every row becomes a button; SearchList didn't change. A prop that takes a function returning JSX is also called a render prop. Older code used render props to share stateful logic between components, and custom hooks do that job now. For drawing the items of a list, like here, it is still a common pattern.

A settings page built from parts

A real settings page mixes both patterns: rows with slots for their controls, and an accordion whose sections open one at a time. Click the checkbox, then open each accordion section in turn. Open the Settings.jsx tab to read the parts.

1import { useState } from "react";2import {3  SettingsRow,4  Accordion,5  AccordionItem,6  AccordionTrigger,7  AccordionContent,8} from "./Settings.jsx";9 10export default function App() {11  const [receipts, setReceipts] = useState(true);12 13  return (14    <>15      <h3>Settings</h3>16      <SettingsRow17        label="Email receipts"18        description={receipts ? "On: a receipt for every order." : "Off"}19        control={20          <input21            type="checkbox"22            aria-label="Email receipts"23            checked={receipts}24            onChange={(e) => setReceipts(e.target.checked)}25          />26        }27      />28      <SettingsRow label="Other devices" control={<button>Sign out</button>} />29      <Accordion>30        <AccordionItem value="data">31          <AccordionTrigger>Download my data</AccordionTrigger>32          <AccordionContent>33            <p>We email you a file with your orders.</p>34            <button>Send the file</button>35          </AccordionContent>36        </AccordionItem>37        <AccordionItem value="delete">38          <AccordionTrigger>Delete my account</AccordionTrigger>39          <AccordionContent>40            <p>This can't be undone.</p>41            <button>Delete account</button>42          </AccordionContent>43        </AccordionItem>44      </Accordion>45    </>46  );47}

In Settings.jsx, SettingsRow on lines 3 to 13 has a label, an optional description, and a control slot that holds any input. In App.jsx, lines 16 to 27 put a checkbox in that slot, and line 28 a button. The row doesn't care which: a new setting with a dropdown needs no change to SettingsRow.

The accordion is a compound component with two contexts. Accordion (lines 18 to 21) keeps which item is open. Each AccordionItem (lines 23 to 29) provides its own value in a second context, so the trigger and the content inside it don't need a value prop each. AccordionTrigger (lines 31 to 40) reads both and opens or closes its item; aria-expanded on line 36 tells screen readers whether it is open. AccordionContent (lines 42 to 46) shows its children only when its item is the open one. Open Download my data, then Delete my account: the first closes, because there is only one open value.

Common mix-ups

• "Only children can hold JSX." No. JSX makes an ordinary object, so any prop can hold it. title and actions on the slots Card are props like any other.
• "More props make a component more flexible." Not past a point. Each on/off prop doubles the combinations, and every page depends on all of them. Slots and parts let each page change only what it needs.
• "Composition means never using props for options." No. Data, like a price, and a few fixed choices, like a button's size, are good props. Composition is for content and layout that differ by page.
• "Compound components need cloneElement." No. That older way only reaches direct children. Context reaches the parts at any depth, inside any wrapper.
• "Content in a slot belongs to the component it's passed to." No. The parent writes it, so it reads the parent's state and props. In the overview, the button inside Card changes App's signedIn.
• "A controlled component updates itself." No. Once the caller passes value, the caller must change it in onValueChange. Without that, the tabs stay where they are.

How to read this table: each row is a pattern from this lesson, what it hands to the caller, and where you saw it.

Practice exercises

Each exercise shows its code's result under it, or when you press Edit & run. Change the code, and the result updates as you type. Try a guess first, then use the hints.

function Card({ title, actions, children }) {
  return (
    <section className="card">
      <header>{title}</header>
      {children}
      {actions && <footer className="actions">{actions}</footer>}
    </section>
  );
}

export default function App() {
  return (
    <>
      <Card title={<h3>Green tea</h3>} actions={<button>Add</button>}>
        <p>$4</p>
      </Card>
      <Card title={<h3>Chai</h3>}>
        <p>$5</p>
      </Card>
      <Card
        title={<h3>Mint tea</h3>}
        actions={<><button>Add</button><button>Save</button></>}
      >
        <p>$3</p>
      </Card>
    </>
  );
}

1function Card({ title, actions, children }) {2  return (3    <section className="card">4      <header>{title}</header>5      {children}6      {actions && <footer className="actions">{actions}</footer>}7    </section>8  );9}10 11export default function App() {12  return (13    <>14      <Card title={<h3>Green tea</h3>} actions={<button>Add</button>}>15        <p>$4</p>16      </Card>17      <Card title={<h3>Chai</h3>}>18        <p>$5</p>19      </Card>20      <Card21        title={<h3>Mint tea</h3>}22        actions={<><button>Add</button><button>Save</button></>}23      >24        <p>$3</p>25      </Card>26    </>27  );28}

1function Card({ title, actions, children }) {2  return (3    <section className="card">4      <header>{title}</header>5      {children}6      {actions && <footer className="actions">{actions}</footer>}7    </section>8  );9}10 11export default function App() {12  return (13    <>14      <Card15        title={<h3>Green tea</h3>}16        actions={<button>Add to cart</button>}17      >18        <p>$4 · fresh and light</p>19      </Card>20      <Card title={<h3>Your order <span className="badge">2 items</span></h3>}>21        <p>Total: $9</p>22      </Card>23    </>24  );25}

1function Card({ title, actions, children }) {2  return (3    <section className="card">4      <header>{title}</header>5      {children}6      {actions && <footer className="actions">{actions}</footer>}7    </section>8  );9}10 11export default function App() {12  return (13    <>14      <Card15        title={<h3>Green tea</h3>}16        actions={<button>Add to cart</button>}17      >18        <p>$4 · fresh and light</p>19      </Card>20      <Card21        title={<h3>Your order <span className="badge">2 items</span></h3>}22        actions={<button>Checkout</button>}23      >24        <p>Total: $9</p>25      </Card>26    </>27  );28}

1import { Tabs, TabList, Tab, TabPanel } from "./Tabs.jsx";2 3export default function App() {4  return (5    <Tabs defaultValue="detail">6      <TabList>7        <Tab value="details">Details</Tab>8        <Tab value="reviews">Reviews (2)</Tab>9        <Tab value="shipping">Shipping</Tab>10      </TabList>11      <TabPanel value="details">12        <p>Chai: black tea with ginger and cardamom.</p>13      </TabPanel>14      <TabPanel value="reviews">15        <p>Warm and spicy. (Asha)</p>16        <p>My morning cup. (Ravi)</p>17      </TabPanel>18      <TabPanel value="shipping">19        <p>Ships in 2 days. Free over $20.</p>20      </TabPanel>21    </Tabs>22  );23}

1import { Tabs, TabList, Tab, TabPanel } from "./Tabs.jsx";2 3export default function App() {4  return (5    <Tabs defaultValue="details">6      <TabList>7        <Tab value="details">Details</Tab>8        <Tab value="reviews">Reviews (2)</Tab>9        <Tab value="shipping">Shipping</Tab>10      </TabList>11      <TabPanel value="details">12        <p>Chai: black tea with ginger and cardamom.</p>13      </TabPanel>14      <TabPanel value="reviews">15        <p>Warm and spicy. (Asha)</p>16        <p>My morning cup. (Ravi)</p>17      </TabPanel>18      <TabPanel value="shipping">19        <p>Ships in 2 days. Free over $20.</p>20      </TabPanel>21    </Tabs>22  );23}

1import { Tabs, TabList, Tab, TabPanel } from "./Tabs.jsx";2 3export default function App() {4  return (5    <Tabs defaultValue="details">6      <TabList>7        <Tab value="details">Details</Tab>8        <Tab value="reviews">Reviews (2)</Tab>9        <Tab value="shipping">Shipping</Tab>10      </TabList>11      <TabPanel value="details">12        <p>Chai: black tea with ginger and cardamom.</p>13      </TabPanel>14      <TabPanel value="reviews">15        <p>Warm and spicy. (Asha)</p>16        <p>My morning cup. (Ravi)</p>17      </TabPanel>18      <TabPanel value="shipping">19        <p>Ships in 2 days. Free over $20.</p>20      </TabPanel>21    </Tabs>22  );23}

1import { Tabs, TabList, Tab, TabPanel, CurrentTab } from "./Tabs.jsx";2 3export default function App() {4  return (5    <Tabs defaultValue="details">6      <TabList>7        <Tab value="details">Details</Tab>8        <Tab value="reviews">Reviews (2)</Tab>9        <Tab value="shipping">Shipping</Tab>10      </TabList>11      <CurrentTab />12      <TabPanel value="details">13        <p>Chai: black tea with ginger and cardamom.</p>14      </TabPanel>15      <TabPanel value="reviews">16        <p>Warm and spicy. (Asha)</p>17        <p>My morning cup. (Ravi)</p>18      </TabPanel>19      <TabPanel value="shipping">20        <p>Ships in 2 days. Free over $20.</p>21      </TabPanel>22    </Tabs>23  );24}

1import { useState } from "react";2 3function Banner({ text, showLink = false, linkText, linkHref, showClose = false, onClose }) {4  return (5    <div className="banner">6      <p>{text}</p>7      {showLink && <a href={linkHref}>{linkText}</a>}8      {showClose && <button onClick={onClose}>Close</button>}9    </div>10  );11}12 13export default function App() {14  const [shipped, setShipped] = useState(true);15 16  return (17    <>18      <Banner text="Free delivery over $20." showLink linkText="See details" linkHref="#delivery" />19      {shipped && (20        <Banner text="Your order has shipped." showClose onClose={() => setShipped(false)} />21      )}22    </>23  );24}

1import { useState } from "react";2 3function Banner({ text, action }) {4  return (5    <div className="banner">6      <p>{text}</p>7      {action}8    </div>9  );10}11 12export default function App() {13  const [shipped, setShipped] = useState(true);14 15  return (16    <>17      <Banner text="Free delivery over $20." action={<a href="#delivery">See details</a>} />18      {shipped && (19        <Banner20          text="Your order has shipped."21          action={<button onClick={() => setShipped(false)}>Close</button>}22        />23      )}24      <Banner text="Chai is back in stock." action={<button>Add to cart</button>} />25    </>26  );27}

1import { Tabs, TabList, Tab, TabPanel } from "./Tabs.jsx";2 3export default function App() {4  return (5    <>6      <button onClick={() => {}}>Read the reviews</button>7      <Tabs defaultValue="details">8        <TabList>9          <Tab value="details">Details</Tab>10          <Tab value="reviews">Reviews (2)</Tab>11        </TabList>12        <TabPanel value="details">13          <p>Chai: black tea with ginger and cardamom.</p>14        </TabPanel>15        <TabPanel value="reviews">16          <p>Warm and spicy. (Asha)</p>17          <p>My morning cup. (Ravi)</p>18        </TabPanel>19      </Tabs>20    </>21  );22}

1import { useState } from "react";2import { Tabs, TabList, Tab, TabPanel } from "./Tabs.jsx";3 4export default function App() {5  const [tab, setTab] = useState("details");6 7  return (8    <>9      <button onClick={() => setTab("reviews")}>Read the reviews</button>10      <Tabs value={tab} onValueChange={setTab}>11        <TabList>12          <Tab value="details">Details</Tab>13          <Tab value="reviews">Reviews (2)</Tab>14        </TabList>15        <TabPanel value="details">16          <p>Chai: black tea with ginger and cardamom.</p>17        </TabPanel>18        <TabPanel value="reviews">19          <p>Warm and spicy. (Asha)</p>20          <p>My morning cup. (Ravi)</p>21        </TabPanel>22      </Tabs>23    </>24  );25}

Check your understanding

For each code question, find who writes the content and who holds the state, then follow it. Press Edit & run on a question's code to check your answer.

Key takeaways

• Composition builds a screen by putting components inside components. A wrapper like Card draws the frame, and the parent decides the content.
• children fills one area. Named slots, props that hold elements, fill several. A slot can be empty, and the component skips its frame.
• Content in a slot is written by the parent, so it reads the parent's state directly. The wrapper never needs a prop for it.
• Configuration, a prop for every variation, doubles the combinations with every switch and puts every page's needs in one shared file. Keep props for data and a few fixed choices.
• Compound components, like Tabs, Tab, and TabPanel, share state through context, so the page can arrange them freely. A small hook that throws outside the parent gives a clear error.
• Inversion of control hands decisions to the caller: the content, the order, the state (value and onValueChange), or how each item is drawn (renderItem).

Coming next: Portals. A modal or a tooltip is composed like any other part, but its DOM has to appear somewhere else on the page; createPortal puts it there.