You can use React to build a search bar that filters and displays data as the user types. With React hooks and the JavaScript map and filter array methods, the end result is a responsive, functional search box.
Creating the Search Bar
The search will take input from a user and trigger the filtering function. You can use a library like Formik to create forms in React, but you can also create a search bar from scratch.
If you don’t have a React project and want to follow along, create one using the create-react-app command.
In the App.js file, add the form element, including the input tag:
You should use the useState React hook and the onChange event to control the input. So, import useState and modify the input to use the state value:
Every time a user types something inside the input element, handleChange updates the state.
Filtering the Data on Input Change
The search bar should trigger a search using the query that the user provides. This means you should filter the data inside the handleChange function. You should also keep track of the filtered data in the state.
First, modify the state to include the data:
Bundling the state values like this, instead of creating one for each value, cuts the number of renders, improving performance.
The data you filter can be anything you want to perform a search on. For example, you can create a list of sample blog posts like this one:
You can also fetch the data using an API from a CDN or a database.
Next, modify the handleChange() function to filter the data whenever the user types inside the input.
The function returns the posts without searching through them if the query is empty. If a user has typed a query, it checks whether the post title includes the query text. Converting the post title and the query to lowercase ensures the comparison is case-insensitive.
Once the filter method returns the results, the handleChange function updates the state with the query text and the filtered data.
Displaying the Search Results
Displaying the search results involves looping over the list array using the map method and displaying the data for each item.
Inside the ul tag, the component checks whether the query is empty. If it is, it displays an empty string because it means the user has not searched for anything. If you want to search through a list of items you are already displaying, remove this check.
If the query is not empty, the map method iterates over the search results and lists the post titles.
You can also add a check that displays a helpful message if the search returns no results.
Adding this message improves the user experience because the user is not left looking at a blank space.
Handling More Than Once Search Parameter
You can use React state and hooks, together with JavaScript events, to create a custom search element that filters a data array.
The filter function only checks if the query matches one property—title—in the objects inside the array. You can improve the search functionality by using the logical OR operator to match the query to other properties in the object.
