Now that we have passed on the removeTodo and toggleTodo methods as props to the TodoItem component, we can implement these features there.

Let's make the TodoItem component dynamic now:

1. In src/TodoItem.js, we start by defining the handler methods for the toggleTodo and removeTodo functions:

    handleToggle () {
        const { toggleTodo, id } = this.props
        toggleTodo(id)
    }

    handleRemove () {
        const { removeTodo, id } = this.props
        removeTodo(id)
    }

2. Then, we assign the handler methods to the checkbox and button, respectively:

    render () {
        const { title, completed } = this.props
        return (
            <div style={{ width: 400, height: 25 }}>
                <input type="checkbox" checked={completed} onChange={this.handleToggle} />
                {title}
                <button style={{ float: 'right' }} onClick={this.handleRemove}>x</button>
            </div>
        )
    }

3. Finally, we need to re-bind the this context for the handler methods. Create a new constructor, as follows:

export default class TodoItem extends React.Component {
    constructor (props) {
        super(props)
 
        this.handleToggle = this.handleToggle.bind(this)
        this.handleRemove = this.handleRemove.bind(this)
    }

Now, the TodoItem component triggers the toggle and remove handler functions.