Mastering React Test-Driven Development

Filtering data

The Git tag for this section is filtering.

Let's add a textbox that the user can use to filter names. Each character that the user types into the search field will cause a new fetch request to be made to the server. That request will contain the new search term as provided by the search box.

The /customers endpoint supports a parameter named searchTerm, which filters search results using those terms. Adding this functionality will highlight the design mistake we made earlier:

1. For this feature, we'll hook on to the change event handler for the input box. Since it will cause an asynchronous fetch request, we know we'll need to use async act to wait for this to happen. Let's build changeAndWait now; add the following to the return ...