Building User Interfaces and Functions with TypeScript and React/

...

/

Creating a Single Orchestrating Component

Creating a Single Orchestrating Component

Learn how to collect and refactor the repeated search sort and filter components into a single, reusable React component.

We'll cover the following...

Reviewing the effects of refactoring

Our SearchInput, Sorters, and Filters components have all been refactored to use the React render prop pattern. The code for the widgets and people data is far less complex than what we had previously in the App component. Here’s what the widgets data looks like now:

TypeScript 3.3.4
<h2>Widgets:</h2>
// This component will render a search input and corresponding searched list
<SearchInput
  data={widgets}
  renderItem={(widget) => <WidgetRenderer {...widget} />}
  initialSearchQuery=""
  searchKeys={["title", "description"]}
/>
// This component will render the sorters drop down and corresponding sorted list
<Sorters
  data={widgets}
  renderItem={(widget) => <WidgetRenderer {...widget}/>}
  label="Sort options for widgets!"
  initialSortProperty="title"
  initialIsDescending={false}
/>
// This component will render the truthy false radio buttons and corresponding filtered list
<Filters
  data={widgets}
  renderItem={(widget) => <WidgetRenderer {...widget}/>}
  label="Widget filters!"
  initialFilterProperties={[{
    property: "title",
    isTruthySelected: true
  }]}
/>

This is what the people data looks like:

TypeScript 3.3.4
<h2>People:</h2>
// This component will render a search input and corresponding searched list
<SearchInput
  data={people}
  renderItem={(person) => <PersonRenderer {...person} />}
  initialSearchQuery="Bob"
  searchKeys={["firstName", "lastName", "eyeColor"]}
/>
// This component will render the sorters drop down and corresponding sorted list
<Sorters
  data={people}
  renderItem={(person) => <PersonRenderer {...person} />}
  label="Sort options for people!"
  initialSortProperty="firstName"
  initialIsDescending={false}
/>
// This component will render the truthy false radio buttons and corresponding filtered list
<Filters
  data={people}
  renderItem={(person) => <PersonRenderer {...person} />}
  label="People filters!"
  initialFilterProperties={[{
    property: "firstName",
    isTruthySelected: true
  }]}
/>

One problem with this composition is that each functionality renders a separate list of the data. This is a disadvantage of the render prop pattern. It’s also immediately clear that all ...