Building a React Component That Filters
Explore how to create a React component for filtering data using TypeScript generics. Understand handling multiple filter properties with checkboxes, managing state changes without mutation, and applying these filters dynamically to data.
We'll cover the following...
We'll cover the following...
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 ...