To be able to add new todo items, we have to connect the AddTodo component.
Let's connect the AddTodo component now:
- Edit src/AddTodo.js and import the inject function from mobx-react:
import { inject } from 'mobx-react'
- Then, wrap the AddTodo component with inject:
export default inject('todoStore')(function AddTodo ({ todoStore }) {
- 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!