Deviopath › React

Product Browser

Hard · Data Display

Combine search, filtering, sorting and pagination for the PRODUCTS array.

Controls:

- <input placeholder="Search">: keeps products whose name contains the text (case-insensitive, trimmed).

- <select className="category"> with values "all", "fruit", "vegetable", "bakery".

- <select className="sort"> with values "name-asc" (default), "price-asc", "price-desc". Equal prices are ordered by name.

Show 4 products per page as <li> items like "Apple - 3" inside a <ul>. Below, render a "Prev" button, <p className="page">Page 1 of 3</p> and a "Next" button. "Prev" is disabled on the first page and "Next" on the last page.

Changing the search, category or sort goes back to page 1. When nothing matches, show <p className="empty">No products</p> instead of the list and "Page 1 of 1".

Next: Cinema Seat Booking