Skip to content

Commit 1ab7108

Browse files
authored
Add guiding note (#6501)
* Add guiding note * Update sandbox to include event handlers
1 parent 5964bfa commit 1ab7108

File tree

1 file changed

+20
-6
lines changed

1 file changed

+20
-6
lines changed

src/content/learn/thinking-in-react.md

+20-6
Original file line numberDiff line numberDiff line change
@@ -484,12 +484,26 @@ function FilterableProductTable({ products }) {
484484
485485
Inside the `SearchBar`, you will add the `onChange` event handlers and set the parent state from them:
486486
487-
```js {5}
488-
<input
489-
type="text"
490-
value={filterText}
491-
placeholder="Search..."
492-
onChange={(e) => onFilterTextChange(e.target.value)} />
487+
```js {4,5,13,19}
488+
function SearchBar({
489+
filterText,
490+
inStockOnly,
491+
onFilterTextChange,
492+
onInStockOnlyChange
493+
}) {
494+
return (
495+
<form>
496+
<input
497+
type="text"
498+
value={filterText}
499+
placeholder="Search..."
500+
onChange={(e) => onFilterTextChange(e.target.value)}
501+
/>
502+
<label>
503+
<input
504+
type="checkbox"
505+
checked={inStockOnly}
506+
onChange={(e) => onInStockOnlyChange(e.target.checked)}
493507
```
494508
495509
Now the application fully works!

0 commit comments

Comments
 (0)