Now that we have migrated the TodoFilterItem component, we can migrate the TodoFilter component. Let's migrate it 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 TodoFilter component. We are not going to use destructuring on the props here:

export default function TodoFilter (props) {

3. In this component, we only return and render three TodoFilterItem components—passing the props down to them:

    return (
        <div>
            <TodoFilterItem {...props} name="all" />{' / '}
            <TodoFilterItem {...props} name="active" />{' / '}
            <TodoFilterItem {...props} name="completed" />
        </div>
    )
}

Now, our TodoFilter component has been successfully migrated.