Learn React Hooks

Migrating TodoFilter

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