Learn React Hooks

Using Hooks for the AddTodo component

We repeat the same upgrade process as we did in the App component for the AddTodo component, as follows:

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

import { inject } from 'mobx-react'

2. Then, import the useTodoStore Hook from our hooks.js file:

import { useTodoStore } from './hooks'

3. Now, remove the inject function that is wrapping the AddTodo component, and also remove all props. The AddTodo function definition should now look as follows:

export default function AddTodo () {

4. Finally, use the Todo Store Hook to get the todoStore object:

    const todoStore = useTodoStore()

Now, our AddTodo component is connected to the MobX store and we can move on to upgrading the TodoFilter component. ...