Learn React Hooks

Connecting the TodoList component

After storing the todos in our store, we can get them from the store, and then we can list all of the todo items in the TodoList component.

Let's connect the TodoList component now:

1. Edit src/TodoList.js and import the inject and observer functions:

import { inject, observer } from 'mobx-react'

2. Remove all context-related imports and Hooks.
3. As before, we use the inject function to wrap the component. Additionally, we now wrap our component with the observer function. The observer function tells MobX that this component should re-render when the store updates:

export default inject('todoStore')(observer(function TodoList ({ todoStore }) {

4. We can now use the filteredTodos computed value from our store, ...