How to Create a Product Search and Filter Component in React with Tailwind CSS

🔍 How to Create a Product Search and Filter Component in React with Tailwind CSS

If you're building an e-commerce app or product listing page, having a search and filter feature is essential. In this tutorial, we’ll build a clean and fully-functional Product Search Filter component in React, styled using Tailwind CSS.

🚀 Features Covered

🔍 Search by product name or description
💵 Filter by price range
🧩 Filter by category
🔃 Sort by name or price
⚡ Reset filters with a single click

🛠️ Technologies Used

React (useState Hook)
Tailwind CSS

📦 Complete Code

Here is the complete ProductSearchFilter component:


// ProductSearchFilter.jsx

import { useState } from 'react';

const ProductSearchFilter = ({ products }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [priceRange, setPriceRange] = useState([0, 1000]);
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [sortOption, setSortOption] = useState('default');

  const categories = ['all', ...new Set(products.map(product => product.category))];

  const filteredProducts = products
    .filter(product => {
      const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
                           product.description.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesPrice = product.price >= priceRange[0] && product.price <= priceRange[1];
      const matchesCategory = selectedCategory === 'all' || product.category === selectedCategory;
      
      return matchesSearch && matchesPrice && matchesCategory;
    })
    .sort((a, b) => {
      if (sortOption === 'price-low') return a.price - b.price;
      if (sortOption === 'price-high') return b.price - a.price;
      if (sortOption === 'name-asc') return a.name.localeCompare(b.name);
      if (sortOption === 'name-desc') return b.name.localeCompare(a.name);
      return 0;
    });

  return (
    <div className="container mx-auto px-4 py-8">
      {/* UI elements go here */}
    </div>
  );
};

export default ProductSearchFilter;

🧠 How It Works

1. State Management with `useState`

We use React’s useState to manage filters:

searchTerm: keyword input
priceRange: array for min & max values
selectedCategory: current selected category
sortOption: current selected sort option

2. Filtering Logic

Products are filtered by:

Text matching in name or description
Price within range
Category match

3. Sorting Logic

Products can be sorted by:

Price (low → high, high → low)
Name (A → Z, Z → A)

4. Reset Filters

If no products match, a “Reset Filters” button resets all inputs to default values.

🖼️ Sample Props Format

Pass the products prop as an array of objects like this:


const products = [
  {
    id: 1,
    name: 'Smartphone',
    description: 'Latest 5G smartphone',
    price: 499,
    category: 'electronics',
    image: 'https://example.com/image.jpg'
  },
  // more products...
];

🎯 Final Thoughts

This ProductSearchFilter component is powerful, clean, and perfect for any e-commerce frontend. You can further enhance it by:

Adding a rating filter
Integrating with API
Making it mobile-friendly with better UX

If you liked this tutorial, don’t forget to share, comment, and subscribe for more awesome React content!

How to Create a Product Search and Filter Component in React with Tailwind CSS