When you send a GET request to an API, you get the response data back from the server. But sometimes managing this data can be a problem.
In this blog post, I will show you how to create a search filter in React. It will search for a particular term in the data using functional components and React hooks.
How to Make a GET Request to an API
First of all, let's make a GET request to an API which will fetch some data from the server. You can use any server you want to get the data, but in this article I'll use {JSON} Placeholder to fetch the users list.
In this example, we have cards which show the names and emails of different users. We also have a search input box which we'll use to search for a particular user.
And if you don't know how to handle GET API calls in React, follow my blog on React CRUD Operations or my video on React CRUD Operations where I show you how to handle API calls in React.
How to Get Search Input from the Search Input Box
Now, let's get our search query from the search input box.
Create a state for the search input.
Here, searchInput is a string, and we'll use setSearchInput to set the search input.
Now, we'll create a function that will handle our search functionality.
And bind this function to the search input via the onChange event.
So, whenever we type something in the input field, the searchItems will run.
Now, we need to pass the input value to the searchItems function.
Next, let's receive the search query into the function and set the searchInput state to this value using setSearchInput that we created previously.
You can check this whether it is working on not by consoling searchValue.
As you can see, I am typing my name here and it is showing up in the console.
How to Filter Items Based on the Search Results
Now, we are going to filter out our APIData using the filter method.
In this function searchTerm, you can see that we are using the filter method to filter out APIData state, which contains the data coming from the server.
We are also using Object.values to get the values from the object item.
Then, we are converting the values into a string using the join(' ') method.
Next, we are changing that string values into lowercase using the toLowerCase method.
And lastly, we are checking if this string includes our search input that we typed into the search bar. We also convert it to lowercase to make sure that if we type our term in uppercase, it converts the string to lowercase to make the search more effective.
Then, we return the whole query.
Now we need to set this filtered array into a variable.
Let's check the above functionality by consoling it. So, search a user name and you will see that you get the data for that username in particular.
Now, we need a state where we can store the filtered data. So, let's create one.
Create one state that will contain our filtered data.
Then set this state to filteredData in the searchItems function using setFilteredResults.
How to Show the Filtered Results in the User Interface
Now, let's show these filtered results in our main UI.
First we need to write some code that checks if our search input is empty, and if so, shows all the data. Otherwise it will filter them according to the search input.
We also need this check in the return part of the application.
So, if the search term's length is greater than 1, we will show filtered data. Otherwise we will show all the data which is stored in the API Data state.
Now, if we search some username in the search field, we will get that specific user's data.
And if we remove the name, we will get all the data.
Here is all the code for your reference:
Now there you have it, a fully functional search filter in React using React hooks.
We often handle this functionality from the back end side by passing search query parameters in the API endpoint. But it's important to know how to handle it from the front end side too.
I build projects to learn how code works.
And while I am not coding, I enjoy writing poetry and stories, playing the piano, and cooking delicious meals.
If you read this far, thank the author to show them you care.
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started