Next, we are going to define the AddTodo component, which renders an input field and a button.

Let's implement the AddTodo component now:

1. Create a new src/AddTodo.js file.
2. Import React and define the class component and a render method:

import React from 'react'

export default class AddTodo extends React.Component {
    render () {
        return (

3. In the render method, we return a form that contains an input field and an add button:

            <form>
                <input type="text" placeholder="enter new task..." style={{ width: 350, height: 15 }} />
                <input type="submit" style={{ float: 'right', marginTop: 2 }} value="add" />
            </form>
        )
    }
}

As we can see, the AddTodo component consists of an input field and a button.