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:

1. Add the following test to the CustomerSearch test 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("...