ToDo List with reducer run

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

1. adds a task when clicking Add button
2. toggles task completion and apply line-through when checkbox is clicked
3. deletes a task when delete button is clicked
4. shows only 'Clear complete' button when there is at least one completed task
5. clears completed tasks when 'Clear complete' is clicked