First of all, we are going to migrate the TodoFilterItem component. Let's start migrating the component now:

1. Edit src/TodoFilter.js and remove the class component code. We are going to define a function component instead now.
2. Define a function for the TodoFilterItem component, which is going to accept three props—the name value, the filterTodos function, and the filter value:

function TodoFilterItem ({ name, filterTodos, filter = 'all' }) {

3. In this function, we define a handler function for changing the filter:

    function handleFilter () {
        filterTodos(name)
    }

4. Next, we define a style object for our span element:

    const style = {
        color: 'blue',
        cursor: 'pointer',
        fontWeight: (filter === name) ? 'bold' : 'normal'
    }

5. Finally, we return and render the span element:

    return <span style={style} onClick={handleFilter}>{name}</span>
}

As we can see, a function component requires much less boilerplate code than the corresponding class component.