Learn React Hooks

Using Hooks for the TodoItem component

Next, we are going to upgrade the TodoItem component, which will be a similar process to what we did with the TodoList component.

Let's use Hooks for the TodoItem component now:

1. Edit src/TodoItem.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 TodoItem component, and also remove the todoStore prop. The TodoItem function definition should now look as follows:

export default function TodoItem ({ item }) {

4. Next, ...