Can you help me understand how to properly define the event handler handleStatus as type MouseEventHandler, in order to pass an additional argument of type Todo to the function?
interface TodoProps {
todos: Array<Todos>
handleStatus: MouseEventHandler,
index: number,
className: string
}
export const Todo: FunctionComponent<TodoProps> = ({ todos, handleDeleteTodo, handleStatus, index, className }): ReactElement => {
const d_todo: Todos = todos[index];
return(
<>
<div className= { className } key={ todos[index].id.toString() }>
{todos[index].describtion}
<Button lable='' disabled= { false } onClick= { () => handleStatus(todos[index]) } />
</div>
</>
);
}
I encountered this error:
ERROR in src/components/Todo.tsx:29:84
TS2345: Argument of type 'Todos' is not assignable to parameter of type 'MouseEvent<Element, MouseEvent>'.
Type 'Todos' is missing the following properties from type 'MouseEvent<Element, MouseEvent>': altKey, button, buttons, clientX, and 29 more.
27 | <div className= { className } key={ todos[index].id.toString() }>
28 | {todos[index].describtion}
> 29 | <Button lable='' disabled= { false } onClick= { () => handleStatus(todos[index]) } />
| ^^^^^^^^^^^^
30 |
31 | </div>
32 | </>