Learn React Hooks

Using Hooks for the TodoFilter component

For the TodoFilter component, we are going to use a similar process to the one that we used for the TodoList component. We are going to use our useTodoStore Hook and the useObserver Hook.

Let's use Hooks for the TodoFilter component now:

1. Edit src/TodoFilter.js and remove the following import statement:

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

2. Then, import the useObserver Hook from mobx-react, and the useTodoStore Hook from our hooks.js file:

import { useObserver } from 'mobx-react'import { useTodoStore } from './hooks'

3. Now, remove the inject and observer functions that are wrapping the TodoFilterItem component, and also remove the todoStore prop. The TodoFilterItem function definition should ...