CODEWITHSUNDEEP
javascriptreactjstypescript
Isaac
Isaac

Reputation: 12884

TypeScript how to overwrite onClick event signature

I have a sub-component as below

import React from 'react';

interface TodoListProps {
  items: { id: string; text: string }[];
  buttonHandler: (todoId: string) => void;
}

const TodoList: React.FC<TodoListProps> = (props) => {
  return (
    <ul>
      {props.items.map((todo) => (
        <li key={todo.id}>
          <span>{todo.text}</span>
          <button onClick={props.buttonHandler}>CLICK ME</button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

Specifying props.buttonHandler as a function that expecting todoId as parameter, and buttonHandler are expected to be passed down from parent. It works great that my parent is getting the type checking correctly.

The problem now is that I'm getting below error at this component

Type '(todoId: string) => void' is not assignable to type '(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void'. Types of parameters 'todoId' and 'event' are incompatible. Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to type 'string'.ts(2322)

How should I handle the problem

Upvotes: 0

Views: 1164

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075109

How should I handle the problem

Pass the correct information to buttonHandler. Currently, you're passing it an event, not a string.

There are a couple of ways you could do that, such as a wrapper arrow function:

<button onClick={() => props.buttonHandler(todo.id)}>CLICK ME</button>

Upvotes: 3

Related Questions