Learn React Hooks

Migrating the AddTodo component

Next, we are going to migrate the AddTodo component. Here, we are going to use a State Hook to handle the input field state.

Let's migrate the AddTodo component now:

1. Edit src/AddTodo.js and adjust the import statement to import the useState Hook from React:

import React, { useState } from 'react'

2. Remove the class component code. We are going to define a function component instead now.
3. First, we define the function, which accepts only one prop—the addTodo function:

export default function AddTodo ({ addTodo }) {

4. Next, we define a State Hook for the input field state:

    const [ input, setInput ] = useState('')

5. Now we can define the handler functions for the input field and the add button:

 function handleInput ...