Learn React Hooks

Connecting the TodoFilter component

Lastly, we have to connect the TodoFilter component in order to be able to select different filters. We also want to show the currently selected filter, so this component needs to be an observer.

Let's connect the TodoFilter component now:

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

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

2. We use the inject and observer functions to wrap the component:

const TodoFilterItem = inject('todoStore')(observer(function TodoFilterItemWrapped ({ name, todoStore }) {

3. We now adjust our handler function to call the filterTodos action from the store:

    function handleFilter () {        todoStore.filterTodos(name)    }

4. Finally, we adjust the style object to ...