Learn React Hooks

Defining the TodoItem component

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