import * as React from "react"; import { TodoData } from "./TodoData"; import { TodoItem } from "./TodoItem"; import { Filter, FilterState } from "./Filter"; type Props = { items: TodoData[]; onCheck: (item: TodoData, checked: boolean) => void; }; export const TodoList = ({ items, onCheck }: Props) => { const [state, setState] = React.useState<FilterState>("All"); const displayItems = items.filter((item) => { if (state === "All") return true; if (state === "Done" && item.done) return true; if (state === "Todo" && !item.done) return true; return false; }); return ( <> <Filter value={state} onChange={(key) => setState(key)} /> {displayItems.map((item) => ( <TodoItem key={item.key} item={item} onCheck={onCheck} /> ))} <div className="panel-block">{displayItems.length} items</div> </> ); };