Question

You want to implement a search that filters a list of products by name and category in Remix. Which approach correctly combines multiple query parameters in the loader?

Accepted Answer

const url = new URL(request.url);
const name = url.searchParams.get('name') || '';
const category = url.searchParams.get('category') || '';
const filtered = products.filter(p => p.name.includes(name) && p.category.includes(category));

Answer

const { name, category } = request.body;
const filtered = products.filter(p => p.name === name && p.category === category);

Answer

const params = useSearchParams();
const filtered = products.filter(p => p.name.includes(params.name) && p.category.includes(params.category));

Answer

const filtered = products.filter(p => p.name.includes(request.query.name) && p.category.includes(request.query.category));

You want to implement a search that filters a list of products by name and category in Remix. Which approach correctly combines multiple query parameters in the loader?

Step 1: Extract multiple query parameters from URL

Step 2: Filter products by both name and category

Final Answer:

Quick Check:

Want More Practice?