Learn React Hooks

Defining the TodoFilter component

Finally, we are going to define the TodoFilter component. In the same file, we are going to define another component for the TodoFilterItem.

Let's start defining the TodoFilterItem and TodoFilter components:

1. Create a new src/TodoFilter.js file.
2. Define a class component for the TodoFilterItem:

class TodoFilterItem extends React.Component {    render () {

3. In this render method, we use destructuring in order to get the name prop:

        const { name } = this.props

4. Next, we are going to define an object for the style:

        const style = {            color: 'blue',            cursor: 'pointer'        }

5. Then, we return a span element with the name value of the filter, and use the defined style object:

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