todo
35 строк · 895.0 Байт
1import React from 'react';
2import './ToDoItem.css';
3
4interface ToDoItemProps {
5task: Task;
6setTasks: React.Dispatch<React.SetStateAction<Task[]>>;
7}
8
9const ToDoItem: React.FC<ToDoItemProps> = ({ task, setTasks }) => {
10const toggleComplete = () => {
11setTasks(prev =>
12prev.map(t => (t.id === task.id ? { ...t, completed: !t.completed } : t))
13);
14};
15
16const deleteTask = () => {
17setTasks(prev => prev.filter(t => t.id !== task.id));
18};
19
20return (
21<li>
22<input
23type="checkbox"
24checked={task.completed}
25onChange={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
35export default ToDoItem;
36