CODEWITHSUNDEEP
reactjstypescript
Pad.Schwende
Pad.Schwende

Reputation: 13

React and TypeScript: How to pass Arguments to Event handler of type: MouseEventHandler

How do I define the event handler: handleStatus of type: MouseEventHandler so that I can 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 got the 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 |         </>

Upvotes: 1

Views: 10526

Answers (1)

Nullndr
Nullndr

Reputation: 1827

If you need to pass both event MouseEvent and both Todo then you need to declare handleStatus as a function that accept an event and a Todo:

handleStatus: (event: MouseEvent, todo: Todo) => void

then in the component:

onClick={(event) => handleStatus(event, todos[index])}

Upvotes: 6

Related Questions