Create 12. Todo List.md

Author: ps0305

Machine Coding/12. Todo List.md

@@ -0,0 +1,84 @@
+```js
+import React, { useState } from 'react';
+
+export default function App() {
+  const [tasks, setTasks] = useState([
+    'Walk the dog',
+    'Water the plants',
+    'Wash the dishes',
+  ]); // Initialize tasks with default items
+
+  const [inputValue, setInputValue] = useState(''); // State for the input value
+
+  // Handler to add a new task
+  const handleSubmit = () => {
+    if (inputValue.trim()) {
+      setTasks([...tasks, inputValue.trim()]); // Add the new task
+      setInputValue(''); // Clear the input field
+    }
+  };
+
+  // Handler to remove a task
+  const handleDelete = (indexToRemove) => {
+    setTasks(tasks.filter((_, index) => index !== indexToRemove)); // Remove the task by index
+  };
+
+  return (
+    <div>
+      <h1>Todo List</h1>
+      <div>
+        <input
+          type="text"
+          placeholder="Add your task"
+          value={inputValue} // Bind value to state
+          onChange={(e) => setInputValue(e.target.value)} // Update input state
+        />
+        <div>
+          <button onClick={handleSubmit}>Submit</button> {/* Add new task */}
+        </div>
+      </div>
+      <ul>
+        {tasks.map((task, index) => (
+          <li key={index}>
+            <span>{task}</span>
+            <button onClick={() => handleDelete(index)}>Delete</button> {/* Remove task */}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+### Explanation
+#### React State
+1. Tasks State:
+
+* The state tasks is initialized with a list of default tasks (['Walk the dog', 'Water the plants', 'Wash the dishes']).
+* Tasks are stored as an array, making it easy to add and remove items.
+2. Input State:
+
+* The state inputValue is used to track the value in the <input> field.
+* This state updates as the user types in the field and resets when a new task is added.
+#### Submit New Task
+The `handleSubmit` function adds a new task:
+
+* Validation: Checks if `inputValue.trim()` is not empty before adding the task.
+* State Update:
+* The setTasks function appends the new task (from the input) to the existing tasks array.
+* The setInputValue('') clears the input field.
+#### Delete Existing Task
+The `handleDelete` function removes a task:
+
+* Index-Based Removal: Uses the filter function to exclude the task at a specified index.
+#### State Update:
+* The setTasks function updates the state with the new list of tasks (excluding the removed task).
+#### User Interaction Flow
+1. Adding Tasks:
+
+* Type a task in the input box.
+* Click `"Submit"`.
+* The new task appears in the list, and the input field is cleared.
+2. Deleting Tasks:
+
+* Click the "Delete" button next to any task.
+* The task is removed from the list.