Building a React Component That Filters

Craft a React component that renders toggleable checkboxes, which are useful for filtering.

Additional filtering complexities

The behaviors for generic filtering can be a bit more complex than searching or sorting. Let’s review how searching and sorting works on a technical level:

  • Searching: Comparing a query string to properties of type string.
  • Sorting: Organizing the data either in ascending or descending order on a given property.

Filtering is a bit more complex than either of these two because we can combine multiple properties and filter with activate or deactivate combinations. The IWidget data type is a good example to use here. Maybe we want to filter for all the widgets in which isSpecialCard, title and description are evaluated as truthy. We must simultaneously filter with three different properties to accomplish this.

Get hands-on with 1200+ tech skills courses.