Learn React Hooks

Migrating TodoFilterItem

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