Build an E-commerce Product Filter grid

Question

Accepted Answer

## Building an E-commerce Product Filter Grid in React

**Mental model:** Keep the product list immutable. Filters (selected categories, max price, sort) are state; the *shown* products are derived by chaining filter → sort. Each filter narrows the set; deriving on render keeps the grid always consistent with the controls.

### Step 1 — Filter state
```jsx
const [cats, setCats] = useState(new Set());
const [maxPrice, setMaxPrice] = useState(1000);
const [sort, setSort] = useState('none');
```

### Step 2 — Derive shown products
```jsx
const shown = useMemo(() => {
  let r = products.filter((p) => (cats.size === 0 || cats.has(p.category)) && p.price <= maxPrice);
  if (sort === 'asc') r = [...r].sort((a, b) => a.price - b.price);
  if (sort === 'desc') r = [...r].sort((a, b) => b.price - a.price);
  return r;
}, [cats, maxPrice, sort]);
```

### Step 3 — Toggle a category filter
```jsx
const toggleCat = (c) => setCats((s) => { const n = new Set(s); n.has(c) ? n.delete(c) : n.add(c); ret

Build an E-commerce Product Filter grid

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)