Now, we define the TodoList component, which is going to make use of the TodoItem component. For now, we are going to statically define two todo items in this component.

Let's start defining the TodoList component:

1. Create a new src/TodoList.js file.
2. Import React and the TodoItem component:

import React from 'react'

import TodoItem from './TodoItem'

3. Then, define the class component and a render method:

export default class TodoList extends React.Component {
    render () {

4. In this render method, we statically define two todo items:

        const items = [
            { id: 1, title: 'Write React Hooks book', completed: true },
            { id: 2, title: 'Promote book', completed: false }
        ]

5. Finally, we are going to render the items using the map function:

        return items.map(item =>
            <TodoItem {...item} key={item.id} />
        )
    }
}

As we can see, the TodoList component renders a list of TodoItem components.