CODEWITHSUNDEEP
reactjstypescript
gabriel
gabriel

Reputation: 500

TypeScript React Js, Type 'void' is not assignable to type '((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined'

I have this functions and this types:

type ClickHandler = (tag: ITag) => void;

type ShowHideDropItem = (tag: ITag) => void;

my tsx:

  const [menuItems, setMenuItems] = useState<ITag[]>(SideBarTags);

  const clickHandler: ClickHandler = (tag) => () => {
    showHideDropItem(tag);
  };

  const showHideDropItem: ShowHideDropItem = (tag) => {
    setMenuItems((items) =>
      items.map((item) => ({
        ...item,
        Active:
          item.Name === tag.Name ? (tag.Active === true ? false : true) : false,
      }))
    );
  };

but i got this error on my onClick:

Type 'void' is not assignable to type '((event: MouseEvent) => void) | undefined'. TS2322

Upvotes: 6

Views: 15689

Answers (1)

kind user
kind user

Reputation: 41893

clickHandler is a curried function (a function that returns a function). Consider including it in your type:

type ClickHandler = (tag: ITag) => (e: React.MouseEvent) => void;

Note: The need of e (event) argument depends if you want to use it in your function or not.

Edit: Your function would look like:

const clickHandler: ClickHandler = (tag) => (e) => {
   e.preventDefault();
   showHideDropItem(tag);
};

Upvotes: 9

Related Questions