Search⌘ K
AI Features
Home
Courses
Building User Interfaces and Functions with TypeScript and React

Finishing the Orchestrating Component

Explore the process of consolidating multiple UI functions into one generic React component that handles searching, sorting, and filtering. This lesson guides you through refactoring state management, applying render props, and optimizing data handling to build cleaner and more maintainable code.

We'll cover the following...

Current implementation of the SearchSortAndFilter

Each component in SearchSortAndFilter is still rendering its own list using the data prop.

TypeScript 3.3.4
import * as React from "react";
interface ISearchSortAndFilterProps {
  title: string;
  data: Array<T>;
  renderItem: (item: T) => ReactNode;
  searchLabel: string;
  initialSearchQuery: string;
  searchKeys: Array<keyof T>;
  sortersLabel: string;
  initialSortProperty: keyof T;
  initialIsDescending: boolean;
  filtersLabel: string;
  initialFilterProperties: Array<IFilter<T>>
}
export function SearchSortAndFilter(props: ISearchSortAndFilterProps) {
  const { 
    title, 
    data, 
    renderItem, 
    searchLabel, 
    initialSearchQuery, 
    searchKeys, 
    sortersLabel, 
    initialSortProperty, 
    initialIsDescending, 
    filtersLabel, 
    initialFilterProperties 
  } = props;
  // each of these components 'works', but each controls it's own list
  // furthermore, only one type of organization can work on each list
  // at a time: only one of search, sort, or filter on it's own respective list
  return (
    <>
      <h2>{title}</h2>
      <SearchInput
        data={data}
        renderItem={renderItem}
        label={searchLabel}
        initialSearchQuery={initialSearchQuery}
        searchKeys={searchKeys}
      />
      <Sorters
        data={data}
        renderItem={renderItem}
        label={sortersLabel}
        initialSortProperty={initialSortProperty}
        initialIsDescending={initialIsDescending}
      />
      <Filters
        data={data}
        renderItem={renderItem}
        label={filtersLabel}
        initialFilterProperties={initialFilterProperties}
      />
    </>
  );
}

To remove the redundant data prop, we can revert back to the callback versions of SearchInput, Sorters, and Filters that we originally built. Then, at the bottom of our component, we’ll combine the array manipulation function calls to filter (for search), sort (for ...