Learn React Hooks

Connecting the AddTodo component

To be able to add new todo items, we have to connect the AddTodo component.

Let's connect the AddTodo component now:

1. Edit src/AddTodo.js and import the inject function from mobx-react:

import { inject } from 'mobx-react'

2. Then, wrap the AddTodo component with inject:

export default inject('todoStore')(function AddTodo ({ todoStore }) {

3. Now that we have the todoStore available, we can use it to adjust our handler function, and to call the addTodo action:

    function handleAdd () {        if (input) {            todoStore.addTodo(input)            setInput('')        }    }

Now, our AddTodo component will call the addTodo action from our todoStore, so we can now add new todo items!