Custom search box with React
Let’s learn about building a search filter with React using hooks.
This article will cover how to create a search filter within a React application using React hooks.
Think about when you have searched for something in a search bar. What typically when you type something into the search bar? It usually goes two ways, 1) search results found, or 2) no search results found. Should the search results match then the user gets the results they are looking for, else the user will get a message along the lines “No search results found”. The latter than usually will not display any results. Initially there will be some sort of list of some data.
In terms of getting the search input…let’s start by creating a state for the search query. I’ll begin my calling it searchQuery. Which will be set using setSearchQuery. The search query is set to a string.
const [searchQuery, setSearchQuery] = useState(“ ”)
Let’s create the function which will handle the search filter.
const handleSearch = () => { some code here }
This function will be called inside the input in the onChange like so…
onChange={(e) => handleSearch(e.target.value)}
Essentially, every time a user enters some text into the search bar then the handleSearch() will get triggered. Let’s update the search query inside the handleSearch() function so that the searchQuery is updated with the user’s search input value.
const handleSearch = (searchInput) => { setSearchQuery(searchInput) }
Now that we have the search query saved in state, lets focus on the API data which needs to be filtered when the search query is applied. Using the filter method we are able to sift through the data to match the search query.
APIdata.filter((data) => { return Object.values(item).join(“”).toLowerCase().includes(searchQuery.toLowerCase())})
With the filter method, it returns an array. The APIdata is an array of objects. By using the Object.values() you get the values from the object items. Then the join() method is used to convert the values to a string. Lastly, toLowerCase() is used to change the string values to lower case.
Create a variable which will return the filtered data results. Here you are storing the filtered results in the variable called filteredResults.
const filteredResults = APIdata.filter((item) => { return Object.values(item).join(“”).toLowerCase().includes(searchQuery.toLowerCase())})
Let’s create a state in which we will set the filtered results. It will look like this…
const [filteredData, setFilteredData] = useState([])
Now that we have created a state we will save our filtered data into the setFilteredData which is in the handleSearch() function. It will look like the following…
const handleSearch = (searchInput) => { setSearchQuery(searchInput); const filteredResults = APIdata.filter((item) => { return Object.values(item).join(“”).toLowerCase().includes(searchQuery.toLowerCase())}; setFilteredData(filteredResults)}
Next, we want to write some code which will display the search results. Should there be a search query that has filtered data which matches the search box results then to display this data. Should the search bar be empty then display all data. Let’s see what that code will look like…
const handleSearch = (searchInput) => { setSearchQuery(searchInput); if (searchQuery !== “”) {const filteredResults = APIdata.filter((item) => { return Object.values(item).join(“”).toLowerCase().includes(searchQuery.toLowerCase())}; setFilteredData(filteredResults)} else {setFilteredData(APIdata)}}
There you have it folks! A fully fledged search box with React and using React hooks.
