Function TodoList

src/components/TodoList.tsx:8–37

({
	items,
	handleSelectionChange,
	handleDelete,
	handleEdit,
}: {
	items: TodoItemType[];
	handleSelectionChange: (event: CustomEvent<ListSelectionChangeEventDetail>) => void;
	handleDelete: (id: number) => void;
	handleEdit: (id: number) => void;
})

import { TodoItem as TodoItemType } from "../types";

function TodoList({
	items,
	handleSelectionChange,
	handleDelete,
	handleEdit,
}: {
	items: TodoItemType[];
	handleSelectionChange: (event: CustomEvent<ListSelectionChangeEventDetail>) => void;
	handleDelete: (id: number) => void;
	handleEdit: (id: number) => void;
}) {
	const list = useRef<List>();

	useEffect(() => {
		const currentList = list.current;

		currentList?.addEventListener("selection-change", handleSelectionChange as EventListener);
		return () => {
			currentList?.removeEventListener("selection-change", handleSelectionChange as EventListener);
		};
	}, [handleSelectionChange]);

	return (
		<ui5-list id="todo-list" selection-mode="Multiple" ref={list}>
			{items.map((todo) => {
				return <TodoItem key={todo.id} id={todo.id} text={todo.text} deadline={todo.deadline} done={todo.done} handleDelete={handleDelete} handleEdit={handleEdit}></TodoItem>;
			})}
		</ui5-list>
	);
}

export default TodoList;