Filtering data
In this section, we’ll 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 that filters search results using those terms, as shown in the following code snippet:
GET /customers?searchTerm=Dan
[
{
firstName: "Daniel",
...
}
...
]
Let’s start by adding a text field into which the user can input a search term, as follows:
- Add the following test to the
CustomerSearchtest suite, just below the last test. It simply checks for a new field:it("renders a text field for a search term", async () => { await renderAndWait(<CustomerSearch />); expect(element("...