TodoList Component

In this lesson, we create a component to list ToDo items.

We'll cover the following

TodoList #

Based on the useTodoList hook, we create the TodoList component.

// ./components/TodoList.js

import React from 'react';

import { useTodoList } from '../hooks/useTodoList';
import { useQuery } from '../hooks/useQuery';
import TodoItem from './TodoItem';
import NewTodo from './NewTodo';

const TodoList = () => {
  const { getQuery, setQuery } = useQuery();
  const todos = useTodoList();
  return (
        {{ id, title, completed }) => (
          <TodoItem key={id} id={id} title={title} completed={completed} />
        <NewTodo />
        Highlight Query for incomplete items:
        <input value={getQuery()} onChange={e => setQuery(} />

export default TodoList;

We also use the useQuery hook to show the text field for the highlight query in this component.

Next #

In the next two lessons we create two components, TodoItem and NewTodo, that are imported into the TodoList.

Get hands-on with 1200+ tech skills courses.