Learn React Hooks

Making the TodoItem component dynamic

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 ...