Learn React Hooks

Making the TodoFilter component dynamic

Lastly, we are going to use the filterTodos method to dynamically filter our todo item list.

Let's start making the TodoFilter component dynamic:

1. In src/TodoFilter.js, in the TodoFilter class, we pass all props down to the TodoFilterItem components:

export default class TodoFilter extends React.Component {    render () {        return (            <div>                <TodoFilterItem {...this.props} name="all" />{' / '}                <TodoFilterItem {...this.props} name="active" />{' / '}                <TodoFilterItem {...this.props} name="completed" />            </div>        )    }}

2. In src/TodoFilter.js, in the TodoFilterItem class, we first define a handler method for setting the filter:

    handleFilter () {        const { name, filterTodos } = this.props        filterTodos(name)    }

3. We then ...