Type for two-element array event handlers

Hi, is there a defined type for two-element array event handlers e.g. onClick={[callback, arg]}. An example code:

type FooComponent = Component<{
  onClick: ???,
}>

const Foo: FooComponent = props => (
  <div onClick={props.onClick}>
  </div>
)

type FooComponent = Component<{
  onClick: ???,
}>

const Foo: FooComponent = props => (
  <div onClick={props.onClick}>
  </div>
)

? I tried

type FooComponent = Component<{
  onClick: JSX.EventHandler<HTMLElement, MouseEvent>,
}>

type FooComponent = Component<{
  onClick: JSX.EventHandler<HTMLElement, MouseEvent>,
}>

but it does not accept the callback. I also tried

type FooComponent = Component<{
  onClick: [(idx: number) => void, number]
}>

type FooComponent = Component<{
  onClick: [(idx: number) => void, number]
}>

but that does not match the JSX onClick type.

1 Reply

GuillaumeOP•3mo ago

That works. Thank you very much. Even better, I see that there is EventHandlerUnion which allows you to manage both ways of passing a callback.