InlineFunction.tsx

import React, { useCallback } from "react";

export const ToDoApp = () => {
  const handleTaskClick = useCallback((taskId: string) => {
    return (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
      alert(`Task with ID: ${taskId} clicked`);
    };
  }, []);

  const tasks = [
    { id: "task1", name: "Buy Groceries" },
    { id: "task2", name: "Walk the Dog" },
    { id: "task3", name: "Pay Bills" },
  ];

  return (
    <div>
      {tasks.map((task) => (
        // <button key={task.id} onClick={(e) => handleTaskClick(task.id)}> ❌
        <button key={task.id} onClick={handleTaskClick(task.id)}>
          {task.name}
        </button>
      ))}
    </div>
  );
};