Learn React Hooks

Migrating the TodoItem component

One of the simplest components to migrate is the TodoItem component. It does not use any state or side effects so we can simply convert it to a function component.

Let's start migrating the TodoItem component:

1. Edit src/TodoItem.js and remove the class component code. We are going to define a function component instead now.
2. We start by defining the function, which accepts five props—the title value, the completed boolean, the id value, the toggleTodo function, and the removeTodo function:

export default function TodoItem ({ title, completed, id, toggleTodo, removeTodo }) {

3. Next, we define our two handler functions:

    function handleToggle () {        toggleTodo(id)    }    function handleRemove () {        removeTodo(id) } ...