Learn React Hooks

Connecting the TodoList component

After connecting the TodoItem component, we can now use the ConnectedTodoItem component in the TodoList component.

Let's connect the TodoList component now:

1. Edit src/components/TodoList.js, and adjust the import statement as follows:

import ConnectedTodoItem from '../containers/ConnectedTodoItem'

2. Then, rename the component that is returned from the function to ConnectedTodoItem:

    return filteredTodos.map(item =>        <ConnectedTodoItem {...item} key={item.id} />    )

3. Now, create a new src/containers/ConnectedTodoList.js file.
4. In this file, we import only the connect function from react-redux, as we are not going to bind the action creators this time:

import { connect } from 'react-redux'

5. Next, we import the ...