Add Search to the Product List: Code Review Practice

Shoppers asked for a way to find a product without scrolling the whole catalog. This adds a search box above the list that filters by name as you type and highlights the matching text. Results are sorted alphabetically so they're easier to scan.

Mweb/src/catalog/ProductList.tsx1 of 3

Files Changed

web/src/catalog/

web/src/catalog/ProductList.tsx

TypeScript · Click a line number to comment · Tap a line to comment

@@ -1,15 +1,30 @@

import { useState } from "react";

import type { Product } from "./types";

import { formatPrice } from "./format";

import { highlight } from "./highlight";

export function ProductList({ products }: { products: Product[] }) {

const [query, setQuery] = useState("");

const visible = products

.sort((a, b) => a.name.localeCompare(b.name))

.filter((p) => p.name.includes(query));

return (

{products.map((p) => (

<span className="price">{formatPrice(p.priceCents)}</span>

</li>

))}

</ul>

<input

type="search"

placeholder="Search products"

value={query}

onChange={(e) => setQuery(e.target.value)}

{visible.map((p, index) => (

<span className="price">{formatPrice(p.priceCents)}</span>

</li>

))}

</ul>

</div>

);

}

web/src/catalog/ProductList.tsx

web/src/catalog/highlight.ts

web/src/catalog/ProductList.test.tsx