Search Filter Using useSearchParams in React Router

In this post we'll see how to implement search filtering (Filtering the items based on the search string with in the same page) using useSearchParams() hook in React Router.

To get more info about useSearchParams() hook, please refer this post- useSearchParams in React Router - Handling Query Parameters

Filter implementation using useSearchParams React example

In the example there is a page that shows product and there is a search box to filter on product name.

import { useEffect, useState } from "react";
import { useSearchParams } from "react-router";

const DUMMY_PRODUCTS = [
    {id:1, name:'Laptop', price:455.50},
    {id:2, name:'Mouse', price:15.89},
    {id:3, name:'USB', price:10.00},
    {id:4, name:'HDD', price:55.50},
];

const ProductFilter = () => {
    const [pName, setpName] = useState('');
    const [filteredProducts, setFilteredProducts] = useState(DUMMY_PRODUCTS);
    const [searchParams, setSearchParams] = useSearchParams();

    const ProductChangeHandler = (event) => {
        event.preventDefault();
        const prodName = event.target.value;
        setpName(prodName);
        // start filtering when atleast 3 characters are entered
        if(prodName.length >= 3){
            setSearchParams({productName:prodName})
        }else{
            setSearchParams();
        }       
    }
    //get the query parameter value
    const searchedProduct = searchParams.get('productName');
    useEffect(()=>{
        if(searchedProduct){
            setFilteredProducts(DUMMY_PRODUCTS
                    .filter(product => product.name.toLowerCase()
                    .includes(searchedProduct.toLowerCase())));
        }else{
            setFilteredProducts(DUMMY_PRODUCTS);
        }

    }, [searchedProduct]);
    
    return (
        <>  
            <h2>Product</h2>
            <div>
            <label>Filter by name</label>
              <input
                type="text"
                value={pName}
                placeholder="Enter product name"
                onChange={ProductChangeHandler}/>
            </div>
            <div className= "row">
                <div className="col-sm-6">
                    <ul className="list-group">
                        {filteredProducts.map(product =>
                            <li className="list-group-item" key={product.id}>{product.name} {product.price}</li>
                        )}
                    </ul>

                </div>
            </div>
        </>

    )
}

export default ProductFilter;

Points to note here-

1. For search input element there is a onChange event to get the current search value which is maintained in the pName state.

   const [pName, setpName] = useState('');
   

   Searched product is added to the URL as search parameter only after 3 characters are entered, which means filtering starts when at least 3 characters are entered.

   if(prodName.length >= 3){
     setSearchParams({productName:prodName})
   }else{
     setSearchParams();
   }  
   

2. Parameters from the current URL are extracted using useSearchParams.
3. Another state is maintained for the filtered products which is the list of products remained after search filtering. Notice that the includes method of the String is used to look for the searched string anywhere in the product name. You can change that implementation for exact match, startsWith or any other implementation based on the requirement.
4. useEffect has a dependency on the search parameter, if search parameter has a value then the filtering is done based on that value otherwise the original list itself is set to the filtered product state.
5. Uses bootstrap 5 for styling.

Filtering products

Less than 3 characters

That's all for this topic Search Filter Using useSearchParams in React Router. If you have any doubt or any suggestions to make please drop a comment. Thanks!

---

Related Topics

1. Dynamic Route in React Router With Example
2. Setting 404 Error Page With React Router
3. Index Route in React Router

You may also like-

1. React Declarative Approach
2. React Virtual DOM
3. React create-react-app Project Structure
4. JavaScript Rest Parameter
5. ArrayList in Java With Examples
6. Count Number of Times Each Character Appears in a String Java Program
7. Java Stream API Interview Questions And Answers
8. What is Client Side Routing in Angular