Sorting and filtering lists

Now that you have learned the basics of the FlatList components, including how to pass data, let’s add some controls to the list that you just implemented in the Rendering data collections section. The FlatList component can be rendered together with other components: for example, list controls. It helps you to manipulate the data source, which ultimately drives what’s rendered on the screen.

Before implementing list control components, it might be helpful to review the high-level structure of these components so that the code has more context. Here’s an illustration of the component structure that you’re going to implement:

Figure 20.2: The component structure

Here’s what each of these components is responsible for:

• ListContainer: The overall container for the list; it follows the familiar React container pattern
• List: A stateless component that passes the relevant pieces of state into...