Mini build: Thinking in React book finder
The static version (step 2 of Thinking in React) is done: a search box, a checkbox and a table of books. Nothing reacts yet. Finish steps 3 to 5.
Step 3: the state is the search text and whether the "Available only" box is ticked. The visible books and the count are computed, not stored.
Step 4: put both pieces of state in BookFinder (the closest common parent) with useState. Step 5: pass the values and callbacks down to SearchBar, and the values to BookTable.
Behaviour: typing in #search shows only books whose title contains the text (ignore upper/lower case). Ticking #available hides books that aren't available. Each visible book is a tr with class book in the table body, and #count says Showing X of 6 books.
What Check tests
- At the start all 6 books show and
#countsaysShowing 6 of 6 books - Typing
theshows only The Hobbit, The Martian and The Gruffalo - The count follows:
Showing 3 of 6 books - Ticking
#availablehides The Gruffalo - Clearing the search with the box still ticked shows the 4 available books
- The state lives in
BookFinder(it callsuseState)
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.