Correct typings for React Typescript Button props with named function

Question

In Tab.tsx:

import React from "react";

interface Props {
  title: string;
  index: number;
  onClick?: React.MouseEventHandler<HTMLElement>;
}

const Tab: React.FC<Props> = ({ title, onClick, index }) => {
  return (
    <li>
      <button onClick={onClick}>
        {title}
      </button>
    </li>
  );
};

export default Tab;

Trying to use it with a named function

const changeTab = (e: MouseEvent<HTMLButtonElement>) => {
  console.log(e);
};

return <Tab onClick={changeTab}></Tab>

I have tried all different combinations of the types and can not get it to work currently receiving following error:

'{ onClick: (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void; }' is missing the following properties from type 'Props': title, index, active

Jeremy Henson · Accepted Answer · 2020-12-06 15:36:26Z

2

It's complaining because you stated that props would include two other items (title and index), but they aren't present.

You either need to make them optional:

interface Props {
  title?: string;
  index?: number;
  onClick?: React.MouseEventHandler<HTMLElement>;
}

Or add the properties:

return <Tab onClick={changeTab} title={''} index={0}></Tab>

answered Dec 6, 2020 at 15:36

Jeremy Henson

1761 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jamie O'Connell Over a year ago

Thanks you are right. New to type script and the errors are sometimes a little tricky to understand what it is complaining about!

Collectives™ on Stack Overflow

Correct typings for React Typescript Button props with named function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related