Learn React Hooks

Migrating the TodoList component

Next, we are going to migrate the TodoList component, which wraps the TodoItem component. Here, we use a context, which means that we can now use a Context Hook.

Let's migrate the TodoList component now:

1. Edit src/TodoList.js and import the useContext Hook from React:

import React, { useContext } from 'react'

2. Remove the class component code. We are going to define a function component instead now.
3. We start by defining the header of our function. In this case, we do not destructure props, but simply store them in a props object:

export default function TodoList (props) {

4. Now we define the Context Hook:

    const items = useContext(StateContext)

5. Finally, we return the list of rendered items, passing the ...