Learn React Hooks

Defining the AddTodo component

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.