/react-list-task

Primary LanguageJavaScript

React Todo Lists Application

The Todo Lists Application is a React component that manages two lists of tasks: a "Todo list" and a "Done list". Users can add new tasks, move tasks between the Todo and Done lists, and see the tasks in each list.

Features

  • Add a New Task: Users can input a task name and add it to the Todo list.
  • Move to Done: Tasks in the Todo list can be marked as done and moved to the Done list.
  • Move to Todo: Tasks in the Done list can be marked as undone and moved back to the Todo list.

Component Structure

State Variables:

  • task: Represents the current task being entered.
  • doneList: Represents the list of completed tasks.
  • todoList: Represents the list of tasks to be done.

Methods:

  • handleSubmit: Handles the form submission to add a new task to the Todo list.
  • handleFieldChange: Handles changes in the input field and updates the task state.
  • doneTask: Moves a task from the Todo list to the Done list.
  • undoneTask: Moves a task from the Done list to the Todo list.

Rendered Content:

  • A form to add new tasks to the Todo list.
  • A table displaying the Todo list with buttons to move tasks to the Done list.
  • A table displaying the Done list with buttons to move tasks back to the Todo list.