1import { useState } from 'react';
2
3// Encapsulate the ID generation so that it can only
4// be read and is protected from external modification.
5const newID = (() => {
6  let id = 0;
7  return () => id++;
8})();
9
10const INITIAL_TASKS = [
11  { id: newID(), label: 'Walk the dog' },
12  { id: newID(), label: 'Water the plants' },
13  { id: newID(), label: 'Wash the dishes' },
14];
15
16export default function App() {
17  const [tasks, setTasks] = useState(INITIAL_TASKS);
18  const [newTask, setNewTask] = useState('');
19
20  return (
21    <div>
22      <h1>Todo List</h1>
23      {/* Use a form instead. */}
24      <form
25        onSubmit={(event) => {
26          // Listen to onSubmit events so that it works for both "Enter" key and
27          // click of the submit <button>.
28          event.preventDefault();
29          // Trim the field and don't add to the list if it's empty.
30          if (newTask.trim() === '') {
31            return;
32          }
33
34          // Trim the value before adding it to the tasks.
35          setTasks((prevTasks) => [
36            ...prevTasks,
37            { id: newID(), label: newTask.trim() },
38          ]);
39          // Clear the <input> field after successful submission.
40          setNewTask('');
41        }}>
42        <input
43          aria-label="Add new task"
44          type="text"
45          placeholder="Add your task"
46          value={newTask}
47          onChange={(event) => setNewTask(event.target.value)}
48        />
49        <div>
50          <button>Submit</button>
51        </div>
52      </form>
53      {/* Display an empty message when there are no tasks */}
54      {tasks.length === 0 ? (
55        <div>No tasks added</div>
56      ) : (
57        <ul>
58          {tasks.map(({ id, label }) => (
59            <li key={id}>
60              <span>{label}</span>
61              <button
62                onClick={() => {
63                  // Add confirmation before destructive actions.
64                  if (
65                    window.confirm('Are you sure you want to delete the task?')
66                  ) {
67                    setTasks((prevTasks) =>
68                      prevTasks.filter((task) => task.id !== id),
69                    );
70                  }
71                }}>
72                Delete
73              </button>
74            </li>
75          ))}
76        </ul>
77      )}
78    </div>
79  );
80}