todo

1
import React from 'react';
2
import './ToDoItem.css';
3

4
interface ToDoItemProps {
5
    task: Task;
6
    setTasks: React.Dispatch<React.SetStateAction<Task[]>>;
7
}
8

9
const ToDoItem: React.FC<ToDoItemProps> = ({ task, setTasks }) => {
10
    const toggleComplete = () => {
11
        setTasks(prev =>
12
            prev.map(t => (t.id === task.id ? { ...t, completed: !t.completed } : t))
13
        );
14
    };
15

16
    const deleteTask = () => {
17
        setTasks(prev => prev.filter(t => t.id !== task.id));
18
    };
19

20
    return (
21
        <li>
22
            <input
23
                type="checkbox"
24
                checked={task.completed}
25
                onChange={toggleComplete}
26
            />
27
            <span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
28
        {task.text}
29
      </span>
30
            <button onClick={deleteTask}>Delete</button>
31
        </li>
32
    );
33
}
34

35
export default ToDoItem;
36