todo

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

5
interface ToDoListProps {
6
    tasks: Task[];
7
    setTasks: React.Dispatch<React.SetStateAction<Task[]>>;
8
    filter: Filter;
9
}
10

11
const ToDoList: React.FC<ToDoListProps> = ({ tasks, setTasks, filter }) => {
12
    const filteredTasks = tasks.filter(task => {
13
        if (filter === 'Active') return !task.completed;
14
        if (filter === 'Completed') return task.completed;
15
        return true;
16
    });
17

18
    return (
19
        <ul>
20
            {filteredTasks.map(task => (
21
                <ToDoItem key={task.id} task={task} setTasks={setTasks} />
22
            ))}
23
        </ul>
24
    );
25
}
26

27
export default ToDoList;
28