# ToDo List with reducer

> Build a simple ToDo list using useReducer, based on Challenge 2, with add, delete, complete, and clear completed tasks.

- Difficulty: beginner
- Tags: useState, useReducer
- Estimated time: 30 minutes
- Tests: 5
- Requires subscription: no

## Overview

Build a simple ToDo list using useReducer, based on Challenge 2, with add, delete, complete, and clear completed tasks.


## Requirements

You need to implement a task list where the user can:

- **Add** new tasks.
  - The task should be added when submitting the form (pressing Enter in the input or clicking the "Add" button).
  - Use `onSubmit` on the `<form>` to handle adding tasks.
- **Delete** existing tasks.
- **Mark tasks as complete** and toggle completion.
- **Clear all completed tasks**.
- Tasks should have a **unique ID**.
- Use **controlled inputs** for the form.
- Render the list dynamically using `map`.
- Maintain **immutability** when updating the state.


## Notes

By completing this challenge, you will practice:

1. Adding an element to a list in React.
2. Removing an element from a list using `filter`.
3. Modifying an element of a list using `map`.
4. Using `useState` to manage component state.
5. Handling user input and form submission.
6. Applying conditional rendering and dynamic classes (e.g., line-through for completed tasks).
7. Rendering lists with `map` and using keys.


## Tests

01. adds a task when clicking Add button
02. toggles task completion and apply line-through when checkbox is clicked
03. deletes a task when delete button is clicked
04. shows only 'Clear complete' button when there is at least one completed task
05. clears completed tasks when 'Clear complete' is clicked