Our task list is displayed correctly and the code we used to achieve this looks quite okay. However, if we want to follow a better approach for composition, we should rethink the design of our task list component. If we draw a line at enlisting the task list's responsibilities, we would come up with things such as listing tasks, adding new tasks to the list, sorting or filtering the task list; however, operations are not performed on an individual task itself. Also, rendering the task itself falls outside of the responsibilities of the task list. The task list component should only serve as a container for tasks.

If we look at our code again, we will see that we're violating the single responsibility principle and rendered the whole task body within our task list component. Let's take a look at how we can fix this by increasing the granularity...