THE REACT FIELD GUIDE

Lesson 6.4 · Reducers and context Interactive article

Thinking in React

Build a searchable tea table the React way: split a design into components, build it static, find the minimal state, place it, and add inverse data flow.

28 min + experimentsIntermediateBy Shrikanth PSUpdated Oct 27, 2026How this lesson was made

By the end, you can

01
Turn a design into componentsDraw boxes around the parts of a mockup, name them, and arrange them into a component hierarchy that matches the data.
02
Find the minimal state and its ownerUse three questions to sort the data into props, state, and values you work out, then put each piece of state in the closest common parent.
03
Wire data both waysPass data down as props, and let a child change its parent's state by calling a function the parent passed down.

From a design to a working table

You've learned the pieces one at a time: components, props, state, lifting state up. This lesson puts them together on one screen, the way you'd build it at work. A designer hands you a mockup of a tea shop's price list: a search box, an "in stock" checkbox, and a table of teas grouped by category. The shop's server sends the teas as data like this:

teas.js: the data the server sendsJavaScript

export const TEAS = [
  { category: "Green", name: "Sencha", price: 4, stocked: true },
  { category: "Green", name: "Matcha", price: 9, stocked: false },
  { category: "Green", name: "Jasmine", price: 5, stocked: true },
  { category: "Black", name: "Assam", price: 3, stocked: true },
  { category: "Black", name: "Earl Grey", price: 4, stocked: false },
  { category: "Herbal", name: "Mint", price: 3, stocked: true },
  { category: "Herbal", name: "Chamomile", price: 4, stocked: true },
];

Each tea has four fields: its category, its name, its price in dollars, and whether it's stocked. Lines 3 and 6 are sold out. (This block is a module the live examples below import, so it has no result of its own.)

Building a page like this in React usually takes the same five steps. The first two give you a page that shows the data. The last three make it respond to the user:

The five steps, in order. Steps 1 and 2 give you a page that shows the data with props only. Steps 3, 4, and 5 make it respond: what changes, where it's kept, and how the inputs change it.

How to read the table: each row is one step, what you do in it, and what you have at the end of it.

The five steps
Step	What you do	What you have after it
1. Break the design into components	Draw a box around each part of the mockup and name it.	A component hierarchy: which component sits inside which.
2. Build a static version	Write the components with props only, from the data.	A page that shows the data but doesn't respond yet.
3. Find the minimal state	Ask three questions about each piece of data.	The few values that change and can't be worked out: here, two.
4. Decide where the state lives	Find the closest common parent of the components that use it.	useState in the right component, passed down as props.
5. Add inverse data flow	Pass setters down, and call them from the inputs.	A page that responds to typing and clicking.

Real-life analogyFitting out a kitchen

Nobody fits a kitchen by running wires first. You plan the cupboards, fit them, then work out what needs power and where the switches go, and only then run the wires. Each stage is easy because the one before it is finished.

In real life: Mark each cupboard, drawer, and shelf on the plan: In React: Step 1: draw a box around each component in the mockup
In real life: Fit the cupboards before the water and power: In React: Step 2: build the static version with props, no state
In real life: List what has to move or switch on: taps and lights: In React: Step 3: find the few values that change
In real life: Put each switch where everyone who needs it can reach it: In React: Step 4: keep the state in the closest common parent
In real life: Run wires from the switches to the lights: In React: Step 5: pass setters down so inputs can change the state

The main idea

Thinking in React means building a screen in five steps. Break the design into components, build a static version with props, find the smallest set of values that change, put each in the closest common parent of the components that use it, and pass setters down so the inputs can change it.

Step 1: Break the design into components

Here is the mockup, written out by hand as one big component, the way a web page without React might look. It runs, but nothing in it responds yet:

The mockup as one componentPop out in the code editor (opens in a new tab)JSX

1export default function App() {2  return (3    <div>4      <form>5        <input type="text" placeholder="Search teas..." />6        <label>7          <input type="checkbox" /> Only show teas in stock8        </label>9      </form>10      <table>11        <caption>Showing 7 of 7 teas</caption>12        <thead>13          <tr><th>Name</th><th>Price</th></tr>14        </thead>15        <tbody>16          <tr><th colSpan="2">Green</th></tr>17          <tr><td>Sencha</td><td>$4</td></tr>18          <tr><td>Matcha (sold out)</td><td>$9</td></tr>19          <tr><td>Jasmine</td><td>$5</td></tr>20        </tbody>21        <tbody>22          <tr><th colSpan="2">Black</th></tr>23          <tr><td>Assam</td><td>$3</td></tr>24          <tr><td>Earl Grey (sold out)</td><td>$4</td></tr>25        </tbody>26        <tbody>27          <tr><th colSpan="2">Herbal</th></tr>28          <tr><td>Mint</td><td>$3</td></tr>29          <tr><td>Chamomile</td><td>$4</td></tr>30        </tbody>31      </table>32    </div>33  );34}

ResultLoading…

Lines 4 to 9 are the search form. Lines 10 to 31 are the table: line 11 is its caption, and each <tbody> is one category, a heading row and then one row per tea, like lines 15 to 20 for Green. Notice how the same row shape repeats on lines 17 to 19, 23 and 24, and 28 and 29. Repeated shapes are a hint: each one wants to be a component.

Start by drawing a box around every part of the mockup and naming it. A good box does one job, the way a good function does. If a part grows too big, split it into smaller boxes. When the data is well organised, the boxes often match its shape: the data has teas grouped by category, and so does the table.

Left: a box around each part of the page, showing two of its three categories. A box inside another box is a component inside another. Right: the same boxes as a hierarchy. CategoryRow and TeaRow are written once and used for every category and every tea.

This screen has five components:

TeaShop holds the whole screen.
SearchBar takes what the user types and ticks.
TeaTable shows the teas that match, and how many.
CategoryRow shows one category's heading.
TeaRow shows one tea.

A component that sits inside another's box in the mockup is its child in the hierarchy, the same render tree Your UI as a tree drew. The table's header row, Name and Price, has no component of its own: it's small and belongs to TeaTable. If it grew, say with sort buttons, it could get one. Try the hierarchy on the real page:

The component hierarchy

The pageTeaRow

Showing 7 of 7 teas
Name	Price
Green
Sencha	$4
Matcha (sold out)	$9
Jasmine	$5
Black
Assam	$3
Earl Grey (sold out)	$4
Herbal
Mint	$3
Chamomile	$4

Try it yourself

Pick a component in the tree.

TeaRow.

Shows one tea's name and price, and says when it's sold out. 7 on the page, one per tea.

The static tea table from step 2 runs here, with React on this page. Picking a component outlines every place it shows on the page. Reset picks TeaRow again.

Step 2: Build a static version

Now write the components, and have them show the data, with no state at all. This example has three files, in tabs: App.jsx, teas.js (the data from the overview), and styles.css for the table's spacing:

A static version built from propsPop out in the code editor (opens in a new tab)JSX

1import { TEAS } from "./teas.js";2 3function CategoryRow({ category }) {4  return (5    <tr>6      <th colSpan="2">{category}</th>7    </tr>8  );9}10 11function TeaRow({ tea }) {12  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;13  return (14    <tr>15      <td>{name}</td>16      <td>${tea.price}</td>17    </tr>18  );19}20 21function TeaTable({ teas }) {22  const shown = teas;23  const categories = [...new Set(shown.map((tea) => tea.category))];24  return (25    <table>26      <caption>Showing {shown.length} of {teas.length} teas</caption>27      <thead>28        <tr><th>Name</th><th>Price</th></tr>29      </thead>30      {categories.map((category) => (31        <tbody key={category}>32          <CategoryRow category={category} />33          {shown34            .filter((tea) => tea.category === category)35            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}36        </tbody>37      ))}38    </table>39  );40}41 42function SearchBar() {43  return (44    <form>45      <input type="text" placeholder="Search teas..." />46      <label>47        <input type="checkbox" /> Only show teas in stock48      </label>49    </form>50  );51}52 53function TeaShop({ teas }) {54  return (55    <div>56      <SearchBar />57      <TeaTable teas={teas} />58    </div>59  );60}61 62export default function App() {63  return <TeaShop teas={TEAS} />;64}

ResultLoading…

Read it from the bottom up. Line 63 passes the data to TeaShop as the teas prop. TeaShop (lines 53 to 60) passes it on to TeaTable on line 57. In TeaTable, line 22 names the teas to show, all of them for now. Line 23 lists the categories once each, in order: map takes each tea's category, and a Set drops the repeats. Lines 30 to 37 make one <tbody> per category, with a CategoryRow and, on lines 33 to 35, a TeaRow for each of its teas, made with filter and map and given a key. Line 12 adds "(sold out)" to a tea that isn't stocked.

The result looks exactly like the mockup. Press Edit & run, open teas.js, and add a line: { category: "Herbal", name: "Rooibos", price: 5, stocked: true },. A new row appears under Herbal, and the caption says Showing 8 of 8 teas. You changed only the data. You can type in the search box, too, but nothing filters: no code reads it yet.

Why no state yet? A static version is mostly typing and little thinking; interactivity is the other way round. Doing them separately makes each easier. You can build top-down, starting from TeaShop, or bottom-up, starting from TeaRow. On small screens like this one, top-down is usually easier; on big projects, bottom-up lets you test small pieces first.

Data here flows one way: down, from App to TeaShop to TeaTable to each row. React calls this one-way data flow, and it means you can always find where a value came from by looking up the tree.

Step 3: Find the minimal state

To make the page respond, some data must change over time. That's state. The rule is to keep as little of it as possible, and work everything else out from it: the Choosing the state structure lesson calls the leftovers redundant state. List every piece of data on the page, and ask three questions about each:

Does it stay the same over time? Then it isn't state.
Is it passed in from a parent as a prop? Then it isn't state.
Can you work it out from other state or props? Then it definitely isn't state.

What's left is state. Try the questions on the five pieces of data the tea table has:

The list of teasnot state

Does it stay the same over time?Yes. The server sends it once; nothing on this page changes it.
Is it passed in from a parent as a prop?Yes. App passes it to TeaShop as the teas prop.
Can you work it out from other state or props?No. It comes from the server.

Try it yourself

It isn't state.

Not state. It never changes here, and it arrives as a prop.

Pick each piece of data on the tea table's page. A yes to any question means it isn't state; three noes mean it is. Reset goes back to the list of teas.

Only two pieces are state: the text in the search box and whether the box is ticked. The list of teas comes in as a prop and never changes here. The teas that match, and how many there are, can be worked out from the teas and those two values every time the component renders.

Check that the two are enough. In this version, App passes them in as fixed values for now, and TeaTable filters by them:

Two values decide the whole tablePop out in the code editor (opens in a new tab)JSX

1import { TEAS } from "./teas.js";2 3function CategoryRow({ category }) {4  return (5    <tr>6      <th colSpan="2">{category}</th>7    </tr>8  );9}10 11function TeaRow({ tea }) {12  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;13  return (14    <tr>15      <td>{name}</td>16      <td>${tea.price}</td>17    </tr>18  );19}20 21function TeaTable({ teas, filterText, inStockOnly }) {22  const shown = teas.filter((tea) => {23    if (inStockOnly && !tea.stocked) return false;24    return tea.name.toLowerCase().includes(filterText.toLowerCase());25  });26  const categories = [...new Set(shown.map((tea) => tea.category))];27  return (28    <table>29      <caption>Showing {shown.length} of {teas.length} teas</caption>30      <thead>31        <tr><th>Name</th><th>Price</th></tr>32      </thead>33      {categories.map((category) => (34        <tbody key={category}>35          <CategoryRow category={category} />36          {shown37            .filter((tea) => tea.category === category)38            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}39        </tbody>40      ))}41    </table>42  );43}44 45function SearchBar() {46  return (47    <form>48      <input type="text" placeholder="Search teas..." />49      <label>50        <input type="checkbox" /> Only show teas in stock51      </label>52    </form>53  );54}55 56function TeaShop({ teas, filterText, inStockOnly }) {57  return (58    <div>59      <SearchBar />60      <TeaTable teas={teas} filterText={filterText} inStockOnly={inStockOnly} />61    </div>62  );63}64 65export default function App() {66  return <TeaShop teas={TEAS} filterText="" inStockOnly={false} />;67}

ResultLoading…

TeaTable now takes filterText and inStockOnly (line 21). Lines 22 to 25 work out the teas to show: line 23 drops sold-out teas when inStockOnly is true, and line 24 keeps the names that contain the text, ignoring capitals (toLowerCase and includes). Line 66 passes the two values in from App.

Press Edit & run and change line 66 to filterText="m" inStockOnly={true}. The table shows Jasmine, Assam, Mint, and Chamomile, and the caption says Showing 4 of 7 teas. Matcha has an m too, but it's sold out. Every screen the user could see comes from these two values.

There are two kinds of data a component gets in React, props and state. How to read the table: each row asks one question, answered for each.

Props and state
Question	Props	State
Where does it come from?	From the parent, written on the component's tag.	From the component itself, with `useState`.
Can the component change it?	No. Props are read-only.	Yes, with its setter, which asks for a new render.
What is it like?	A function's arguments.	A component's memory.
In the tea table	`teas`, and the filters `TeaTable` and `SearchBar` receive.	`filterText` and `inStockOnly`, in `TeaShop`.

Step 4: Decide where the state lives

Now find which component owns each piece of state: the one that keeps it with useState. Do what Sharing state between components did:

List every component that shows or uses it. SearchBar shows the text and the tick, and TeaTable filters by them.
Find their closest common parent: the lowest component with all of them inside it. Here, TeaShop.
Keep the state there. If no component fits, make a new one just to hold it, above the common parent.

SearchBar shows both filters and TeaTable filters by them. The closest component above both is TeaShop, so it keeps the two pieces of state and passes them down as props.

The two pieces of state always go together, so both live in TeaShop:

TeaShop owns the two filtersPop out in the code editor (opens in a new tab)JSX

1import { useState } from "react";2import { TEAS } from "./teas.js";3 4function CategoryRow({ category }) {5  return (6    <tr>7      <th colSpan="2">{category}</th>8    </tr>9  );10}11 12function TeaRow({ tea }) {13  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;14  return (15    <tr>16      <td>{name}</td>17      <td>${tea.price}</td>18    </tr>19  );20}21 22function TeaTable({ teas, filterText, inStockOnly }) {23  const shown = teas.filter((tea) => {24    if (inStockOnly && !tea.stocked) return false;25    return tea.name.toLowerCase().includes(filterText.toLowerCase());26  });27  const categories = [...new Set(shown.map((tea) => tea.category))];28  return (29    <table>30      <caption>Showing {shown.length} of {teas.length} teas</caption>31      <thead>32        <tr><th>Name</th><th>Price</th></tr>33      </thead>34      {categories.map((category) => (35        <tbody key={category}>36          <CategoryRow category={category} />37          {shown38            .filter((tea) => tea.category === category)39            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}40        </tbody>41      ))}42    </table>43  );44}45 46function SearchBar({ filterText, inStockOnly }) {47  return (48    <form>49      <input type="text" placeholder="Search teas..." value={filterText} />50      <label>51        <input type="checkbox" checked={inStockOnly} /> Only show teas in stock52      </label>53    </form>54  );55}56 57function TeaShop({ teas }) {58  const [filterText, setFilterText] = useState("");59  const [inStockOnly, setInStockOnly] = useState(false);60  return (61    <div>62      <SearchBar filterText={filterText} inStockOnly={inStockOnly} />63      <TeaTable teas={teas} filterText={filterText} inStockOnly={inStockOnly} />64    </div>65  );66}67 68export default function App() {69  return <TeaShop teas={TEAS} />;70}

ResultLoading…

Lines 58 and 59 add the two pieces of state to TeaShop, starting empty and unticked. Line 62 passes them to SearchBar, and line 63 to TeaTable. SearchBar now shows them: line 49 gives the text box value={filterText}, and line 51 gives the checkbox checked={inStockOnly}. App no longer passes them in.

Press Edit & run and change useState("") on line 58 to useState("mint"): the box says mint, and the table shows only Mint. Now type in the box. Nothing happens. The box is controlled: React shows exactly filterText, and nothing sets it, so every key you press is undone. React also prints a warning in the console (Pop out shows it): You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. The checkbox gets the same warning for checked. Step 5 fixes both.

Step 5: Add inverse data flow

So far, data only flows down. To let the user change the filters, data must also flow the other way: the inputs, deep in SearchBar, must change state that TeaShop owns. Only TeaShop can call setFilterText, so it passes that function down, and SearchBar calls it. This is called inverse data flow. Type mi in the box:

The finished table: setters passed down and calledPop out in the code editor (opens in a new tab)JSX

1import { useState } from "react";2import { TEAS } from "./teas.js";3 4function CategoryRow({ category }) {5  return (6    <tr>7      <th colSpan="2">{category}</th>8    </tr>9  );10}11 12function TeaRow({ tea }) {13  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;14  return (15    <tr>16      <td>{name}</td>17      <td>${tea.price}</td>18    </tr>19  );20}21 22function TeaTable({ teas, filterText, inStockOnly }) {23  const shown = teas.filter((tea) => {24    if (inStockOnly && !tea.stocked) return false;25    return tea.name.toLowerCase().includes(filterText.toLowerCase());26  });27  const categories = [...new Set(shown.map((tea) => tea.category))];28  return (29    <table>30      <caption>Showing {shown.length} of {teas.length} teas</caption>31      <thead>32        <tr><th>Name</th><th>Price</th></tr>33      </thead>34      {categories.map((category) => (35        <tbody key={category}>36          <CategoryRow category={category} />37          {shown38            .filter((tea) => tea.category === category)39            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}40        </tbody>41      ))}42    </table>43  );44}45 46function SearchBar({ filterText, inStockOnly, onFilterTextChange, onInStockOnlyChange }) {47  return (48    <form>49      <input50        type="text"51        placeholder="Search teas..."52        value={filterText}53        onChange={(event) => onFilterTextChange(event.target.value)}54      />55      <label>56        <input57          type="checkbox"58          checked={inStockOnly}59          onChange={(event) => onInStockOnlyChange(event.target.checked)}60        />{" "}61        Only show teas in stock62      </label>63    </form>64  );65}66 67function TeaShop({ teas }) {68  const [filterText, setFilterText] = useState("");69  const [inStockOnly, setInStockOnly] = useState(false);70  return (71    <div>72      <SearchBar73        filterText={filterText}74        inStockOnly={inStockOnly}75        onFilterTextChange={setFilterText}76        onInStockOnlyChange={setInStockOnly}77      />78      <TeaTable teas={teas} filterText={filterText} inStockOnly={inStockOnly} />79    </div>80  );81}82 83export default function App() {84  return <TeaShop teas={TEAS} />;85}

ResultLoading…

Lines 75 and 76 pass TeaShop's setters to SearchBar as onFilterTextChange and onInStockOnlyChange. SearchBar takes them on line 46. Line 53 calls onFilterTextChange(event.target.value) on every key, and line 59 calls onInStockOnlyChange with whether the box is now ticked. (Handler props named on… come from Responding to events.)

Typing m sets filterText to "m": TeaShop renders again, the box shows the new text, and TeaTable shows the five teas with an m: Showing 5 of 7 teas. Typing i makes it "mi", and only Jasmine, Mint, and Chamomile are left: Showing 3 of 7 teas. Tick the box, and sold-out teas go too.

Data goes down: TeaShop passes filterText to both children. A key press comes back up: SearchBar calls onFilterTextChange("mi"), which is TeaShop's setFilterText, and both children get the new value.

Each change makes a round trip: up as a call, down as props. Follow it on the real table. Each key and tick adds a line:

The pagetype and tick

Showing 7 of 7 teas
Name	Price
Green
Sencha	$4
Matcha (sold out)	$9
Jasmine	$5
Black
Assam	$3
Earl Grey (sold out)	$4
Herbal
Mint	$3
Chamomile	$4

Up as a call, down as props0 shown

Nothing typed yet.

Try it yourself

Type in the box, or tick it.

Type mi in the search box, one letter at a time, then tick Only show teas in stock. Each change goes up as a call and comes back down as props.

The finished tea table from step 5 runs here, with React on this page. Its setters also add a line to the list: the last five changes. Reset empties the box and the list.

React makes this flow explicit. Some libraries keep an input and a variable in sync on their own, called two-way binding. In React, you write the call yourself, so you can always see who changes what.

A new feature, the same five steps

The shop now wants a price slider: "Up to $5". Run the steps again. Step 1: a new box, PriceFilter. Step 2: it shows a slider. Step 3: the picked price changes and can't be worked out, so it's state; the slider's top end can be worked out from the teas, so it isn't. Step 4: PriceFilter shows it and TeaTable uses it, so it lives in TeaShop. Step 5: pass the setter down. Drag the slider to 4:

A price slider added with the same stepsPop out in the code editor (opens in a new tab)JSX

1import { useState } from "react";2import { TEAS } from "./teas.js";3 4function CategoryRow({ category }) {5  return (6    <tr>7      <th colSpan="2">{category}</th>8    </tr>9  );10}11 12function TeaRow({ tea }) {13  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;14  return (15    <tr>16      <td>{name}</td>17      <td>${tea.price}</td>18    </tr>19  );20}21 22function TeaTable({ teas, filterText, inStockOnly, maxPrice }) {23  const shown = teas.filter((tea) => {24    if (inStockOnly && !tea.stocked) return false;25    if (tea.price > maxPrice) return false;26    return tea.name.toLowerCase().includes(filterText.toLowerCase());27  });28  const categories = [...new Set(shown.map((tea) => tea.category))];29  return (30    <table>31      <caption>Showing {shown.length} of {teas.length} teas</caption>32      <thead>33        <tr><th>Name</th><th>Price</th></tr>34      </thead>35      {categories.map((category) => (36        <tbody key={category}>37          <CategoryRow category={category} />38          {shown39            .filter((tea) => tea.category === category)40            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}41        </tbody>42      ))}43    </table>44  );45}46 47function PriceFilter({ maxPrice, highest, onMaxPriceChange }) {48  return (49    <label>50      Up to ${maxPrice}{" "}51      <input52        type="range"53        min="1"54        max={highest}55        value={maxPrice}56        onChange={(event) => onMaxPriceChange(Number(event.target.value))}57      />58    </label>59  );60}61 62function TeaShop({ teas }) {63  const highest = Math.max(...teas.map((tea) => tea.price));64  const [filterText, setFilterText] = useState("");65  const [inStockOnly, setInStockOnly] = useState(false);66  const [maxPrice, setMaxPrice] = useState(highest);67  return (68    <div>69      <SearchBar70        filterText={filterText}71        inStockOnly={inStockOnly}72        onFilterTextChange={setFilterText}73        onInStockOnlyChange={setInStockOnly}74      />75      <PriceFilter maxPrice={maxPrice} highest={highest} onMaxPriceChange={setMaxPrice} />76      <TeaTable teas={teas} filterText={filterText} inStockOnly={inStockOnly} maxPrice={maxPrice} />77    </div>78  );79}80 81function SearchBar({ filterText, inStockOnly, onFilterTextChange, onInStockOnlyChange }) {82  return (83    <form>84      <input85        type="text"86        placeholder="Search teas..."87        value={filterText}88        onChange={(event) => onFilterTextChange(event.target.value)}89      />90      <label>91        <input92          type="checkbox"93          checked={inStockOnly}94          onChange={(event) => onInStockOnlyChange(event.target.checked)}95        />{" "}96        Only show teas in stock97      </label>98    </form>99  );100}101 102export default function App() {103  return <TeaShop teas={TEAS} />;104}

ResultLoading…

Line 63 works out the highest price, 9, from the teas, on every render. Line 66 is the new state, maxPrice, starting at that highest price, so every tea shows at first. PriceFilter (lines 47 to 60) shows the slider and calls onMaxPriceChange with the new number on line 56. Line 75 passes it the state and the setter, and line 76 passes maxPrice to TeaTable, where line 25 drops the teas that cost more. At 4, the caption says Showing 5 of 7 teas; tick the box too, and it's 4.

The highest price the user picked on the slider
Whether "Only show teas in stock" is ticked
The list of teas from the server
The slider's top end: the most expensive tea's price
The teas at or under the picked price
The "Showing 4 of 7 teas" caption
The table's column names, Name and Price
The text typed in the search box

Try it yourself

0 of 8 correct

Sort each piece of data for the price slider feature: is it state, or not, and why not?

Choose a category for every card. You can change an answer at any time; Reset clears them all.

When a screen grows many pieces of state that change together, or that components far apart need, the same steps lead you to a reducer and context: step 4 picks the owner, and a provider component holds the state there.

Common mix-ups

"Anything that changes on screen needs its own state." No. The rows and the count change, but they're worked out from two pieces of state. Keeping them too means copies to keep in sync.
"State belongs in the component that shows it." No. It belongs in the closest common parent of every component that uses it. SearchBar shows the text, but TeaShop owns it.
"A child updates its parent by changing a prop." No. Props are read-only. The child calls a function the parent passed down, and the parent sets its own state.
"You must get the components right before writing any code." No. The hierarchy is a first guess. Split a component when it grows, or merge two when they always change together.
"An input with value is broken if typing does nothing." No. It's waiting for step 5. React shows the state, so add onChange and set the state there.
"Props and state are two names for the same thing." No. Props come from the parent and are read-only. State is the component's own memory, which it can change. A parent's state often becomes its children's props.

Practice exercises

Each one uses the tea table. Before you change code, ask which step the task belongs to. Press Edit & run to change the code; the result updates as you type.

Exercise 1 · Warm-upPredict the caption

App passes filterText="a" and inStockOnly={true}. What does the caption say? Answer first, then press Edit & run to check.

Starter codePop out in the code editor (opens in a new tab)JSX

import { TEAS } from "./teas.js";

function CategoryRow({ category }) {
  return (
    <tr>
      <th colSpan="2">{category}</th>
    </tr>
  );
}

function TeaRow({ tea }) {
  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;
  return (
    <tr>
      <td>{name}</td>
      <td>${tea.price}</td>
    </tr>
  );
}

function TeaTable({ teas, filterText, inStockOnly }) {
  const shown = teas.filter((tea) => {
    if (inStockOnly && !tea.stocked) return false;
    return tea.name.toLowerCase().includes(filterText.toLowerCase());
  });
  const categories = [...new Set(shown.map((tea) => tea.category))];
  return (
    <table>
      <caption>Showing {shown.length} of {teas.length} teas</caption>
      <thead>
        <tr><th>Name</th><th>Price</th></tr>
      </thead>
      {categories.map((category) => (
        <tbody key={category}>
          <CategoryRow category={category} />
          {shown
            .filter((tea) => tea.category === category)
            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}
        </tbody>
      ))}
    </table>
  );
}

function SearchBar() {
  return (
    <form>
      <input type="text" placeholder="Search teas..." />
      <label>
        <input type="checkbox" /> Only show teas in stock
      </label>
    </form>
  );
}

function TeaShop({ teas, filterText, inStockOnly }) {
  return (
    <div>
      <SearchBar />
      <TeaTable teas={teas} filterText={filterText} inStockOnly={inStockOnly} />
    </div>
  );
}

export default function App() {
  return <TeaShop teas={TEAS} filterText="a" inStockOnly={true} />;
}

Solution

One way to solve itPop out in the code editor (opens in a new tab)JSX

1import { TEAS } from "./teas.js";2 3function CategoryRow({ category }) {4  return (5    <tr>6      <th colSpan="2">{category}</th>7    </tr>8  );9}10 11function TeaRow({ tea }) {12  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;13  return (14    <tr>15      <td>{name}</td>16      <td>${tea.price}</td>17    </tr>18  );19}20 21function TeaTable({ teas, filterText, inStockOnly }) {22  const shown = teas.filter((tea) => {23    if (inStockOnly && !tea.stocked) return false;24    return tea.name.toLowerCase().includes(filterText.toLowerCase());25  });26  const categories = [...new Set(shown.map((tea) => tea.category))];27  return (28    <table>29      <caption>Showing {shown.length} of {teas.length} teas</caption>30      <thead>31        <tr><th>Name</th><th>Price</th></tr>32      </thead>33      {categories.map((category) => (34        <tbody key={category}>35          <CategoryRow category={category} />36          {shown37            .filter((tea) => tea.category === category)38            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}39        </tbody>40      ))}41    </table>42  );43}44 45function SearchBar() {46  return (47    <form>48      <input type="text" placeholder="Search teas..." />49      <label>50        <input type="checkbox" /> Only show teas in stock51      </label>52    </form>53  );54}55 56function TeaShop({ teas, filterText, inStockOnly }) {57  return (58    <div>59      <SearchBar />60      <TeaTable teas={teas} filterText={filterText} inStockOnly={inStockOnly} />61    </div>62  );63}64 65export default function App() {66  return <TeaShop teas={TEAS} filterText="a" inStockOnly={true} />;67}

ResultLoading…

Six names contain an a, and inStockOnly drops the two sold-out ones, Matcha and Earl Grey. That leaves Sencha, Jasmine, Assam, and Chamomile: Showing 4 of 7 teas.

Exercise 2 · Warm-upA new category

This static version keeps the data in App.jsx. Add an Oolong tea, Tieguanyin, $6, in stock. How many category headings does the table show now?

Starter codePop out in the code editor (opens in a new tab)JSX

1const TEAS = [2  { category: "Green", name: "Sencha", price: 4, stocked: true },3  { category: "Green", name: "Matcha", price: 9, stocked: false },4  { category: "Green", name: "Jasmine", price: 5, stocked: true },5  { category: "Black", name: "Assam", price: 3, stocked: true },6  { category: "Black", name: "Earl Grey", price: 4, stocked: false },7  { category: "Herbal", name: "Mint", price: 3, stocked: true },8  { category: "Herbal", name: "Chamomile", price: 4, stocked: true },9];10 11function CategoryRow({ category }) {12  return (13    <tr>14      <th colSpan="2">{category}</th>15    </tr>16  );17}18 19function TeaRow({ tea }) {20  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;21  return (22    <tr>23      <td>{name}</td>24      <td>${tea.price}</td>25    </tr>26  );27}28 29function TeaTable({ teas }) {30  const shown = teas;31  const categories = [...new Set(shown.map((tea) => tea.category))];32  return (33    <table>34      <caption>Showing {shown.length} of {teas.length} teas</caption>35      <thead>36        <tr><th>Name</th><th>Price</th></tr>37      </thead>38      {categories.map((category) => (39        <tbody key={category}>40          <CategoryRow category={category} />41          {shown42            .filter((tea) => tea.category === category)43            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}44        </tbody>45      ))}46    </table>47  );48}49 50function SearchBar() {51  return (52    <form>53      <input type="text" placeholder="Search teas..." />54      <label>55        <input type="checkbox" /> Only show teas in stock56      </label>57    </form>58  );59}60 61function TeaShop({ teas }) {62  return (63    <div>64      <SearchBar />65      <TeaTable teas={teas} />66    </div>67  );68}69 70export default function App() {71  return <TeaShop teas={TEAS} />;72}

ResultLoading…

Solution

One way to solve itPop out in the code editor (opens in a new tab)JSX

1const TEAS = [2  { category: "Green", name: "Sencha", price: 4, stocked: true },3  { category: "Green", name: "Matcha", price: 9, stocked: false },4  { category: "Green", name: "Jasmine", price: 5, stocked: true },5  { category: "Black", name: "Assam", price: 3, stocked: true },6  { category: "Black", name: "Earl Grey", price: 4, stocked: false },7  { category: "Herbal", name: "Mint", price: 3, stocked: true },8  { category: "Herbal", name: "Chamomile", price: 4, stocked: true },9  { category: "Oolong", name: "Tieguanyin", price: 6, stocked: true },10];11 12function CategoryRow({ category }) {13  return (14    <tr>15      <th colSpan="2">{category}</th>16    </tr>17  );18}19 20function TeaRow({ tea }) {21  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;22  return (23    <tr>24      <td>{name}</td>25      <td>${tea.price}</td>26    </tr>27  );28}29 30function TeaTable({ teas }) {31  const shown = teas;32  const categories = [...new Set(shown.map((tea) => tea.category))];33  return (34    <table>35      <caption>Showing {shown.length} of {teas.length} teas</caption>36      <thead>37        <tr><th>Name</th><th>Price</th></tr>38      </thead>39      {categories.map((category) => (40        <tbody key={category}>41          <CategoryRow category={category} />42          {shown43            .filter((tea) => tea.category === category)44            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}45        </tbody>46      ))}47    </table>48  );49}50 51function SearchBar() {52  return (53    <form>54      <input type="text" placeholder="Search teas..." />55      <label>56        <input type="checkbox" /> Only show teas in stock57      </label>58    </form>59  );60}61 62function TeaShop({ teas }) {63  return (64    <div>65      <SearchBar />66      <TeaTable teas={teas} />67    </div>68  );69}70 71export default function App() {72  return <TeaShop teas={TEAS} />;73}

ResultLoading…

TeaTable lists the categories from the data, so a tea with a new category gets a new heading and a new <tbody> on its own. The table shows Green, Black, Herbal, and Oolong: 4 headings, and Showing 8 of 8 teas.

Exercise 3 · PracticeWire up the checkbox

Typing filters the table, but the checkbox can't be ticked. Add inverse data flow for it. With the search box empty, what does the caption say after you tick it?

Starter codePop out in the code editor (opens in a new tab)JSX

1import { useState } from "react";2import { TEAS } from "./teas.js";3 4function CategoryRow({ category }) {5  return (6    <tr>7      <th colSpan="2">{category}</th>8    </tr>9  );10}11 12function TeaRow({ tea }) {13  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;14  return (15    <tr>16      <td>{name}</td>17      <td>${tea.price}</td>18    </tr>19  );20}21 22function TeaTable({ teas, filterText, inStockOnly }) {23  const shown = teas.filter((tea) => {24    if (inStockOnly && !tea.stocked) return false;25    return tea.name.toLowerCase().includes(filterText.toLowerCase());26  });27  const categories = [...new Set(shown.map((tea) => tea.category))];28  return (29    <table>30      <caption>Showing {shown.length} of {teas.length} teas</caption>31      <thead>32        <tr><th>Name</th><th>Price</th></tr>33      </thead>34      {categories.map((category) => (35        <tbody key={category}>36          <CategoryRow category={category} />37          {shown38            .filter((tea) => tea.category === category)39            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}40        </tbody>41      ))}42    </table>43  );44}45 46function SearchBar({ filterText, inStockOnly, onFilterTextChange }) {47  return (48    <form>49      <input50        type="text"51        placeholder="Search teas..."52        value={filterText}53        onChange={(event) => onFilterTextChange(event.target.value)}54      />55      <label>56        <input type="checkbox" checked={inStockOnly} />{" "}57        Only show teas in stock58      </label>59    </form>60  );61}62 63function TeaShop({ teas }) {64  const [filterText, setFilterText] = useState("");65  const [inStockOnly, setInStockOnly] = useState(false);66  return (67    <div>68      <SearchBar69        filterText={filterText}70        inStockOnly={inStockOnly}71        onFilterTextChange={setFilterText}72      />73      <TeaTable teas={teas} filterText={filterText} inStockOnly={inStockOnly} />74    </div>75  );76}77 78export default function App() {79  return <TeaShop teas={TEAS} />;80}

ResultLoading…

Solution

One way to solve itPop out in the code editor (opens in a new tab)JSX

1import { useState } from "react";2import { TEAS } from "./teas.js";3 4function CategoryRow({ category }) {5  return (6    <tr>7      <th colSpan="2">{category}</th>8    </tr>9  );10}11 12function TeaRow({ tea }) {13  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;14  return (15    <tr>16      <td>{name}</td>17      <td>${tea.price}</td>18    </tr>19  );20}21 22function TeaTable({ teas, filterText, inStockOnly }) {23  const shown = teas.filter((tea) => {24    if (inStockOnly && !tea.stocked) return false;25    return tea.name.toLowerCase().includes(filterText.toLowerCase());26  });27  const categories = [...new Set(shown.map((tea) => tea.category))];28  return (29    <table>30      <caption>Showing {shown.length} of {teas.length} teas</caption>31      <thead>32        <tr><th>Name</th><th>Price</th></tr>33      </thead>34      {categories.map((category) => (35        <tbody key={category}>36          <CategoryRow category={category} />37          {shown38            .filter((tea) => tea.category === category)39            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}40        </tbody>41      ))}42    </table>43  );44}45 46function SearchBar({ filterText, inStockOnly, onFilterTextChange, onInStockOnlyChange }) {47  return (48    <form>49      <input50        type="text"51        placeholder="Search teas..."52        value={filterText}53        onChange={(event) => onFilterTextChange(event.target.value)}54      />55      <label>56        <input57          type="checkbox"58          checked={inStockOnly}59          onChange={(event) => onInStockOnlyChange(event.target.checked)}60        />{" "}61        Only show teas in stock62      </label>63    </form>64  );65}66 67function TeaShop({ teas }) {68  const [filterText, setFilterText] = useState("");69  const [inStockOnly, setInStockOnly] = useState(false);70  return (71    <div>72      <SearchBar73        filterText={filterText}74        inStockOnly={inStockOnly}75        onFilterTextChange={setFilterText}76        onInStockOnlyChange={setInStockOnly}77      />78      <TeaTable teas={teas} filterText={filterText} inStockOnly={inStockOnly} />79    </div>80  );81}82 83export default function App() {84  return <TeaShop teas={TEAS} />;85}

ResultLoading…

The checkbox now calls TeaShop's setInStockOnly with event.target.checked. Ticking it sets inStockOnly to true, and the table drops Matcha and Earl Grey: Showing 5 of 7 teas.

Exercise 4 · PracticeA count that falls behind

This version keeps the count in state too. Tick the box and compare the count with the list. Fix it by removing state, not adding code. After your fix, what does the count say once you tick the box?

Starter codePop out in the code editor (opens in a new tab)JSX

1import { useState } from "react";2import { TEAS } from "./teas.js";3 4function TeaShop({ teas }) {5  const [filterText, setFilterText] = useState("");6  const [inStockOnly, setInStockOnly] = useState(false);7  const [count, setCount] = useState(teas.length);8  const shown = teas.filter((tea) => {9    if (inStockOnly && !tea.stocked) return false;10    return tea.name.toLowerCase().includes(filterText.toLowerCase());11  });12 13  function handleTextChange(text) {14    setFilterText(text);15    setCount(teas.filter((tea) => tea.name.toLowerCase().includes(text.toLowerCase())).length);16  }17 18  return (19    <div>20      <form>21        <input type="text" placeholder="Search teas..." value={filterText} onChange={(event) => handleTextChange(event.target.value)} />22        <label>23          <input type="checkbox" checked={inStockOnly} onChange={(event) => setInStockOnly(event.target.checked)} />{" "}24          Only show teas in stock25        </label>26      </form>27      <p>Showing {count} of {teas.length} teas</p>28      <ul>29        {shown.map((tea) => (30          <li key={tea.name}>{tea.name}</li>31        ))}32      </ul>33    </div>34  );35}36 37export default function App() {38  return <TeaShop teas={TEAS} />;39}

ResultLoading…

Solution

One way to solve itPop out in the code editor (opens in a new tab)JSX

1import { useState } from "react";2import { TEAS } from "./teas.js";3 4function TeaShop({ teas }) {5  const [filterText, setFilterText] = useState("");6  const [inStockOnly, setInStockOnly] = useState(false);7  const shown = teas.filter((tea) => {8    if (inStockOnly && !tea.stocked) return false;9    return tea.name.toLowerCase().includes(filterText.toLowerCase());10  });11 12  return (13    <div>14      <form>15        <input type="text" placeholder="Search teas..." value={filterText} onChange={(event) => setFilterText(event.target.value)} />16        <label>17          <input type="checkbox" checked={inStockOnly} onChange={(event) => setInStockOnly(event.target.checked)} />{" "}18          Only show teas in stock19        </label>20      </form>21      <p>Showing {shown.length} of {teas.length} teas</p>22      <ul>23        {shown.map((tea) => (24          <li key={tea.name}>{tea.name}</li>25        ))}26      </ul>27    </div>28  );29}30 31export default function App() {32  return <TeaShop teas={TEAS} />;33}

ResultLoading…

The count could always be worked out: it's shown.length. Keeping it in state made a copy that only the text box updated, so ticking the box left it behind. Worked out on every render, it's always right: Showing 5 of 7 teas.

Exercise 5 · ChallengeCategory buttons

Add buttons All, Green, Black, and Herbal that show one category at a time, starting with All. Then pick Black and tick the box. What does the caption say?

Starter codePop out in the code editor (opens in a new tab)JSX

1import { useState } from "react";2import { TEAS } from "./teas.js";3 4function CategoryRow({ category }) {5  return (6    <tr>7      <th colSpan="2">{category}</th>8    </tr>9  );10}11 12function TeaRow({ tea }) {13  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;14  return (15    <tr>16      <td>{name}</td>17      <td>${tea.price}</td>18    </tr>19  );20}21 22function TeaTable({ teas, filterText, inStockOnly }) {23  const shown = teas.filter((tea) => {24    if (inStockOnly && !tea.stocked) return false;25    return tea.name.toLowerCase().includes(filterText.toLowerCase());26  });27  const categories = [...new Set(shown.map((tea) => tea.category))];28  return (29    <table>30      <caption>Showing {shown.length} of {teas.length} teas</caption>31      <thead>32        <tr><th>Name</th><th>Price</th></tr>33      </thead>34      {categories.map((category) => (35        <tbody key={category}>36          <CategoryRow category={category} />37          {shown38            .filter((tea) => tea.category === category)39            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}40        </tbody>41      ))}42    </table>43  );44}45 46function SearchBar({ filterText, inStockOnly, onFilterTextChange, onInStockOnlyChange }) {47  return (48    <form>49      <input50        type="text"51        placeholder="Search teas..."52        value={filterText}53        onChange={(event) => onFilterTextChange(event.target.value)}54      />55      <label>56        <input57          type="checkbox"58          checked={inStockOnly}59          onChange={(event) => onInStockOnlyChange(event.target.checked)}60        />{" "}61        Only show teas in stock62      </label>63    </form>64  );65}66 67function TeaShop({ teas }) {68  const [filterText, setFilterText] = useState("");69  const [inStockOnly, setInStockOnly] = useState(false);70  return (71    <div>72      <SearchBar73        filterText={filterText}74        inStockOnly={inStockOnly}75        onFilterTextChange={setFilterText}76        onInStockOnlyChange={setInStockOnly}77      />78      <TeaTable teas={teas} filterText={filterText} inStockOnly={inStockOnly} />79    </div>80  );81}82 83export default function App() {84  return <TeaShop teas={TEAS} />;85}

ResultLoading…

Solution

One way to solve itPop out in the code editor (opens in a new tab)JSX

1import { useState } from "react";2import { TEAS } from "./teas.js";3 4function CategoryRow({ category }) {5  return (6    <tr>7      <th colSpan="2">{category}</th>8    </tr>9  );10}11 12function TeaRow({ tea }) {13  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;14  return (15    <tr>16      <td>{name}</td>17      <td>${tea.price}</td>18    </tr>19  );20}21 22function TeaTable({ teas, filterText, inStockOnly, pickedCategory }) {23  const shown = teas.filter((tea) => {24    if (inStockOnly && !tea.stocked) return false;25    if (pickedCategory !== "All" && tea.category !== pickedCategory) return false;26    return tea.name.toLowerCase().includes(filterText.toLowerCase());27  });28  const categories = [...new Set(shown.map((tea) => tea.category))];29  return (30    <table>31      <caption>Showing {shown.length} of {teas.length} teas</caption>32      <thead>33        <tr><th>Name</th><th>Price</th></tr>34      </thead>35      {categories.map((category) => (36        <tbody key={category}>37          <CategoryRow category={category} />38          {shown39            .filter((tea) => tea.category === category)40            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}41        </tbody>42      ))}43    </table>44  );45}46 47function CategoryChips({ pickedCategory, onPickedCategoryChange }) {48  return (49    <p>50      {["All", "Green", "Black", "Herbal"].map((name) => (51        <button key={name} aria-pressed={pickedCategory === name} onClick={() => onPickedCategoryChange(name)}>52          {name}53        </button>54      ))}55    </p>56  );57}58 59function SearchBar({ filterText, inStockOnly, onFilterTextChange, onInStockOnlyChange }) {60  return (61    <form>62      <input63        type="text"64        placeholder="Search teas..."65        value={filterText}66        onChange={(event) => onFilterTextChange(event.target.value)}67      />68      <label>69        <input70          type="checkbox"71          checked={inStockOnly}72          onChange={(event) => onInStockOnlyChange(event.target.checked)}73        />{" "}74        Only show teas in stock75      </label>76    </form>77  );78}79 80function TeaShop({ teas }) {81  const [filterText, setFilterText] = useState("");82  const [inStockOnly, setInStockOnly] = useState(false);83  const [pickedCategory, setPickedCategory] = useState("All");84  return (85    <div>86      <SearchBar87        filterText={filterText}88        inStockOnly={inStockOnly}89        onFilterTextChange={setFilterText}90        onInStockOnlyChange={setInStockOnly}91      />92      <CategoryChips pickedCategory={pickedCategory} onPickedCategoryChange={setPickedCategory} />93      <TeaTable94        teas={teas}95        filterText={filterText}96        inStockOnly={inStockOnly}97        pickedCategory={pickedCategory}98      />99    </div>100  );101}102 103export default function App() {104  return <TeaShop teas={TEAS} />;105}

ResultLoading…

pickedCategory is a third piece of state in TeaShop. CategoryChips shows which button is pressed and calls onPickedCategoryChange, and TeaTable filters by it. With Black picked and the box ticked, only Assam is left: Showing 1 of 7 teas.

Exercise 6 · ChallengeCheapest first

Add a Cheapest first checkbox that sorts the teas in each category by price. Sort a copy, never the prop (Updating arrays in state shows why). With it ticked, which tea is the last row under Green?

Starter codePop out in the code editor (opens in a new tab)JSX

1import { useState } from "react";2import { TEAS } from "./teas.js";3 4function CategoryRow({ category }) {5  return (6    <tr>7      <th colSpan="2">{category}</th>8    </tr>9  );10}11 12function TeaRow({ tea }) {13  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;14  return (15    <tr>16      <td>{name}</td>17      <td>${tea.price}</td>18    </tr>19  );20}21 22function TeaTable({ teas, filterText, inStockOnly }) {23  const shown = teas.filter((tea) => {24    if (inStockOnly && !tea.stocked) return false;25    return tea.name.toLowerCase().includes(filterText.toLowerCase());26  });27  const categories = [...new Set(shown.map((tea) => tea.category))];28  return (29    <table>30      <caption>Showing {shown.length} of {teas.length} teas</caption>31      <thead>32        <tr><th>Name</th><th>Price</th></tr>33      </thead>34      {categories.map((category) => (35        <tbody key={category}>36          <CategoryRow category={category} />37          {shown38            .filter((tea) => tea.category === category)39            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}40        </tbody>41      ))}42    </table>43  );44}45 46function SearchBar({ filterText, inStockOnly, onFilterTextChange, onInStockOnlyChange }) {47  return (48    <form>49      <input50        type="text"51        placeholder="Search teas..."52        value={filterText}53        onChange={(event) => onFilterTextChange(event.target.value)}54      />55      <label>56        <input57          type="checkbox"58          checked={inStockOnly}59          onChange={(event) => onInStockOnlyChange(event.target.checked)}60        />{" "}61        Only show teas in stock62      </label>63    </form>64  );65}66 67function TeaShop({ teas }) {68  const [filterText, setFilterText] = useState("");69  const [inStockOnly, setInStockOnly] = useState(false);70  return (71    <div>72      <SearchBar73        filterText={filterText}74        inStockOnly={inStockOnly}75        onFilterTextChange={setFilterText}76        onInStockOnlyChange={setInStockOnly}77      />78      <TeaTable teas={teas} filterText={filterText} inStockOnly={inStockOnly} />79    </div>80  );81}82 83export default function App() {84  return <TeaShop teas={TEAS} />;85}

ResultLoading…

Solution

One way to solve itPop out in the code editor (opens in a new tab)JSX

1import { useState } from "react";2import { TEAS } from "./teas.js";3 4function CategoryRow({ category }) {5  return (6    <tr>7      <th colSpan="2">{category}</th>8    </tr>9  );10}11 12function TeaRow({ tea }) {13  const name = tea.stocked ? tea.name : `${tea.name} (sold out)`;14  return (15    <tr>16      <td>{name}</td>17      <td>${tea.price}</td>18    </tr>19  );20}21 22function TeaTable({ teas, filterText, inStockOnly, cheapestFirst }) {23  const shown = teas.filter((tea) => {24    if (inStockOnly && !tea.stocked) return false;25    return tea.name.toLowerCase().includes(filterText.toLowerCase());26  });27  const ordered = cheapestFirst ? [...shown].sort((a, b) => a.price - b.price) : shown;28  const categories = [...new Set(shown.map((tea) => tea.category))];29  return (30    <table>31      <caption>Showing {shown.length} of {teas.length} teas</caption>32      <thead>33        <tr><th>Name</th><th>Price</th></tr>34      </thead>35      {categories.map((category) => (36        <tbody key={category}>37          <CategoryRow category={category} />38          {ordered39            .filter((tea) => tea.category === category)40            .map((tea) => <TeaRow key={tea.name} tea={tea} />)}41        </tbody>42      ))}43    </table>44  );45}46 47function SearchBar({ filterText, inStockOnly, cheapestFirst, onFilterTextChange, onInStockOnlyChange, onCheapestFirstChange }) {48  return (49    <form>50      <input51        type="text"52        placeholder="Search teas..."53        value={filterText}54        onChange={(event) => onFilterTextChange(event.target.value)}55      />56      <label>57        <input58          type="checkbox"59          checked={inStockOnly}60          onChange={(event) => onInStockOnlyChange(event.target.checked)}61        />{" "}62        Only show teas in stock63      </label>64      <label>65        <input66          type="checkbox"67          checked={cheapestFirst}68          onChange={(event) => onCheapestFirstChange(event.target.checked)}69        />{" "}70        Cheapest first71      </label>72    </form>73  );74}75 76function TeaShop({ teas }) {77  const [filterText, setFilterText] = useState("");78  const [inStockOnly, setInStockOnly] = useState(false);79  const [cheapestFirst, setCheapestFirst] = useState(false);80  return (81    <div>82      <SearchBar83        filterText={filterText}84        inStockOnly={inStockOnly}85        cheapestFirst={cheapestFirst}86        onFilterTextChange={setFilterText}87        onInStockOnlyChange={setInStockOnly}88        onCheapestFirstChange={setCheapestFirst}89      />90      <TeaTable teas={teas} filterText={filterText} inStockOnly={inStockOnly} cheapestFirst={cheapestFirst} />91    </div>92  );93}94 95export default function App() {96  return <TeaShop teas={TEAS} />;97}

ResultLoading…

cheapestFirst is state in TeaShop, shown by a checkbox in SearchBar. TeaTable sorts a copy, so the teas prop stays untouched, and the categories keep their order because they come from shown. Under Green, Sencha ($4), Jasmine ($5), then Matcha ($9) is last.

Check your understanding

For each question, ask which step it belongs to, and what the three questions say about each piece of data.

The Thinking in React quiz · 7 questionsScore: first tries count

Question 1 of 7Which of these is state in the tea table?
Choose an answer to see the explanation.
Question 2 of 7Why isn't "how many teas match" kept in state?
Choose an answer to see the explanation.
Question 3 of 7SearchBar shows the search text, and TeaTable filters by it. Where should filterText live?
Choose an answer to see the explanation.

Question 4 of 7What does this page show?

Read the code, then predictPop out in the code editor (opens in a new tab)JSX

const teas = [
  { name: "Sencha", stocked: true },
  { name: "Matcha", stocked: false },
  { name: "Mint", stocked: true },
  { name: "Chamomile", stocked: true },
];

function TeaCount({ filterText, inStockOnly }) {
  const shown = teas.filter(
    (tea) => (!inStockOnly || tea.stocked) && tea.name.toLowerCase().includes(filterText)
  );
  return <p>Showing {shown.length} of {teas.length} teas</p>;
}

export default function App() {
  return <TeaCount filterText="m" inStockOnly={true} />;
}

Choose an answer to see the explanation.

Question 5 of 7In step 4, the box is written <input value={filterText} /> with no onChange. What happens when you type in it?
Choose an answer to see the explanation.
Question 6 of 7What is inverse data flow?
Choose an answer to see the explanation.
Question 7 of 7Why build a static version before adding any state?
Choose an answer to see the explanation.

Key takeaways

Step 1: draw a box around each part of the design, one job per box, and arrange the boxes into a hierarchy.
Step 2: build a static version with props only. Data flows down, from the top component to the rows.
Step 3: keep the minimal state. Data that never changes, comes in as a prop, or can be worked out from other values isn't state.
Step 4: keep each piece of state in the closest common parent of the components that use it.
Step 5: pass setters down as on… props, and call them from the inputs. That's inverse data flow.
A new feature runs through the same steps: find its state, find its owner, and wire it both ways.

Remember the one-liner.
Components from the design, a static version from props, the least state in the right place, and setters passed down.

Coming next: Forms and inputs. It looks closely at the inputs this table used: controlled and uncontrolled fields, reading a whole form, and checking what the user typed.

CompleteFrontend Clear concepts. Working examples.

Thinking in React

From a design to a working table

Step 1: Break the design into components

Step 2: Build a static version

Step 3: Find the minimal state

Step 4: Decide where the state lives

Step 5: Add inverse data flow

A new feature, the same five steps

Common mix-ups

Practice exercises

Check your understanding

Key takeaways

Tuto

Hi, I'm Tuto

Give feedback