After defining the TodoList component, we are now going to define the TodoItem component, in order to render single items.

Let's start defining the TodoItem component:

1. Create a new src/TodoItem.js component.
2. Import React, and define the component, as well as the render method:

import React from 'react'

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

3. Now, we are going to use destructuring in order to get the title and completed props:

        const { title, completed } = this.props

4. Finally, we are going to render a div element containing a checkbox, a title, and a button to delete the item:

        return (
            <div style={{ width: 400, height: 25 }}>
                <input type="checkbox" checked={completed} />
                {title}
                <button style={{ float: 'right' }}>x</button>
            </div>
        )
    }
}

The TodoItem component consists of a checkbox, a title, and a button to delete the item.