Learn React Hooks

Connecting the TodoItem component

To be able to toggle or remove todo items, we have to connect the TodoItem component. We also define the TodoItem component as an observer, so that MobX knows it will have to re-render the component when the item object changes.

Let's connect the TodoItem component now:

1. Edit src/TodoItem.js, and import the inject and observer functions from mobx-react:

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

2. Then, wrap the TodoItem component with inject and observer:

export default inject('todoStore')(observer(function TodoItem ({ item, todoStore }) {

3. We can now use destructuring of the item object within the component. As it is defined as an observer, MobX will be able to track changes to the item object, even ...