Octagram Labs
JavaScriptData StructuresReact
Sign in
← Back to problems

List Rendering Pipeline

Rendering Listsmedium

Course · Section 11: Working With Arrays · Lecture 156: Data Transformations: map, filter, reduce

Implement three cooperating helpers used to render a filtered, sorted, paginated list: - `filterItems(items, query)` keeps items whose `name` contains `query` (case-insensitive). - `sortItems(items)` returns a new array sorted by `name`. - `paginate(items, page, size)` returns the 1-indexed page slice.

Examples

Input: filter 'a' over [banana, apple, cherry, avocado], sort, paginate(1, 2)
Output: ['apple', 'avocado']
Filtering to names containing 'a' then sorting and taking page 1 of size 2.

Sample tests

Input: filter, sort, paginate
Output: ["apple","avocado"]
Input: paginate page 2
Output: [3,4]

+ 1 hidden test run on Submit.

Hints

Common pitfalls
  • sort mutates in place; spread first.
  • Off-by-one in the page offset (page is 1-indexed).

Learning resources

  • React: Rendering Lists
Approach & explanation (try first)

Real list UIs compose filter, sort, and paginate. Keeping them separate, pure functions makes each testable and reusable.

Loading...
⌘/Ctrl + Enter

Run your code to see results.