How to Build a Search Filter with React

Think of that e-commerce site you visit so often. Now imagine it without a search filter, hectic, right? No one wants to spend time checking endless pages of unrelated items when they could simply select “Female sunglasses” in the categories section and instantly get a list of relevant options.

When you receive the list of relevant options after filtering items on a site, it's likely that you still spend some time reviewing them to make a choice. Still, the process of filtering reduces the effort significantly.

A search filter helps users quickly find the products or services they want, and it can be implemented in many variations. In this article, we’ll explore what a search filter does, why it's important, and walk through a quick tutorial of how to build one with React.

TL;DR:

Search filters help users find what they are looking for by refining results based on criteria like price or brand. Adding this feature to a website, especially a service-based one, can improve user experience, speed up navigation, and boost sales. This article includes a tutorial showing how to implement a search filter in React.

What is a Search Filter?

A search filter is a feature that narrows down search results based on certain keywords or preferences. This could be achieved by selecting parameters like price, year, or sorting from highest to lowest.

You have most likely interacted with search filters on e-commerce apps, job boards, car rental websites, university websites, and other similar platforms.

Reasons websites need a search filter;

User Experience: Filters can reduce the strain or frustration users face from scrolling to find items, and make the process of navigating through products and services smoother.

Speeds up and Narrow Down Search: Search filter makes it easier for users to narrow down large amounts of information to find what they need.

Helps Prevent Churn: If a website's search filter is poorly implemented or non-existent, users can become frustrated, lose interest, and leave. However, if it is implemented correctly, users would be able to find products faster, which leads to higher conversion and sales.

Types of Search Filter

There are different types of search filters, and they can be grouped as follows;

• Checkbox Filters: A Checkbox allows users to select multiple values when filtering, e.g., size, brand, colour, etc.

• Dropdown Filters: This places filter options in a dropdown model for users to select from.

• Radio Filters: This is a single select filter where users can only choose one option, e.g., highest price, lowest price, etc.

• Range and Sliders Filters: This allows users to select an exact option, and lets users specify a minimum and maximum value, e.g., price or date.

• Faceted Filters: Facet filters allow users to sort and find items based on specific criteria, and they can combine multiple attributes. For example, on a car sales website, users can filter by the brand, year, and model to narrow down their search.

Things to Consider when Implementing a Search Filter

There are certain things to consider when implementing a search filter on a website to deliver search results that are not only relevant but also accurate.

User-Friendly Filters: Filters should be easy to use and understand so that anyone without technical knowledge should be able to figure them out.

Prioritize Important Filters: Place the most essential filters, which are those that customers are likely to interact at the top.

Show Filter Changes in Real-Time: When users select filters, they should see the results immediately instead of waiting for the page to refresh or having to refresh the page manually.

Make Active Filters Visible: When users interact with a filter, for instance, by ticking or unticking checkboxes, they should be able to see their actions reflected immediately.

Sorting Options: Users should be able to sort the results of their search by criteria like price, ratings, relevance, etc, which gives them more control to find what they want.

Support Detailed Searches: Filters can make navigation smoother when users apply or combine multiple criteria, and users should be able to see the results update in real time. This is a feature that makes filtering dynamic.

Build a Search Filter with React

In this quick tutorial, you will learn how to build a search filter in a React project.

Prerequisite: To follow along, you should understand how to create a React project in React using VSCode, how to display products in a card component, and how to create a sidebar using <aside>, and manage component state.

In the image above, the page displays different types of shoes with their name, descriptions, and prices. The simple, single filter allows users to display shoe types such as male, female, unisex, or all.

The image above is a dataset stored in the shoesData.js file in our React project. It contains different categories of shoes; this is the data we'll be filtering through in this tutorial.

Code to Display Product on Page

• ProductDisplay is a React component that receives a prop called shoes, which is an array of shoe objects. Inside the wrapper div, we have some CSS styling to make the page look good.

• The header section also displays the title “shoes” and the number of shoes. This dynamically displays the number of items in the array. shoes: <span ...> {shoes.length} shoes </span>

• It also contains a responsive grid that displays 2-column items on small screens and 3 items on large screens.

• Within the wrapper div, the shoes array is mapped using .map(), with each shoe rendering a card that has a unique ID to help React track items. Each card contains the shoe image, the name, category, price, and size.

Desktop Filter

This displays the radio buttons to select the category of shoes, e.g., male, female, etc.

The Desktop filter component takes two props: selected and onChange.

• Selected: stores the currently selected shoe type, e.g., men, women, unisex, or all.

• onchange: is a callback function that is triggered when a different shoe type is selected.

• The div wrapper encloses the filter title at the top of the page and the

  element, which displays the filter selection.

• There are four radio buttons for different shoe types, and each radio button is wrapped in a <label>.

• type="radio" defines input as a radio button

• name ="type" the radio buttons share the same name "type" so that only one can be selected at a time

• checked={selected==="men"}: This sets the radio to checked if the selected value matches "men."

• onChange={() =>onChange("men")}: calls the onChange function to tell the parent component that "men" was selected.

Filter Section.

In the filter section code, the following items are imported;

• useState component to keep track of the changes or state.

• DesktopFilter, which is the sidebar component that has the filter options

• ProductDisplay component that shows the list of all shoes

• The shoes array of objects from the shoesData.js file.

Inside the FilterSection component, ProductDisplay and the Filter section are displayed side by side.

• A state was created for the selected filter const [categoryFilter,setCategoryFilter] = useState(""), which would store the shoe type currently selected.

• The setCategoryFilter function updates the categoryFilter, and the initial value is set to " " so that all shoes display by default.

• const filteredShoes checks if a categoryFilter contains a value. If a filter is selected, it keeps only the shoes where the shoe.category matches categoryFilter. If it is empty, it returns all shoes.

• The HandleFilterChange function is called when the user clicks a radio button in the DesktopFilter.

• newFilter is the new category selected; it updates the state to show the filtered shoes on the page.

Inside the return statement, the layout includes both DesktopFilter Sidebar and ProductDisplay.

• The DesktopFilter sidebar has two props passed in: selected={categoryFilter}, which tells the filter the option selected, and onChange={handleFilterChange}, which allows the filter to update the selected category.

• ProductDisplay shows all the shoes when there's no filter, and the filtered list of shoes when a filter is selected.

Filter by selecting only women's shoes

Filter by selecting only men's shoes

Filter by selecting only unisex shoes

Summary

Search filters help users narrow down search results for products and services. Adding this feature to a website or application gives users more control over what they want to see and helps them find information quickly. This not only makes your site accessible, but it also improves the user experience and can even increase sales.

Frequently Asked Questions