Learn React Hooks

Adjusting the TodoList component

Now that we have connected the TodoList component, we can move the filter logic from the App component to the TodoList component, as follows:

1. Import the useMemo Hook in src/components/TodoList.js:

import React, { useMemo } from 'react'

2. Edit src/components/App.js, and remove the following code:

    const filteredTodos = useMemo(() => {        const { filter, todos } = state        switch (filter) {            case 'active':                return todos.filter(t => t.completed === false)            case 'completed':                return todos.filter(t => t.completed === true)            default:            case 'all':                return todos        }    }, [ state ])

3. Now, edit src/components/TodoList.js, and add the filteredTodos code here. Please note that we removed the destructuring from the state object, as ...