React TypeScript | Correct Type for Event Handler Prop

Question

My App component passes down an event handler as a prop to a Button Component

// App.js

  public handlePlay = () => {
    this.setState({ ****** })
  }

// render

<Button play={this.handlePlay} />

What is the correct type for the event handler passed via prop i.e. play?

// Button.js
interface ButtontProps {
  play: any //what is the correct type here?
}

export const Button: React.SFC<ButtontProps> = ({ play }) => (
  <button onClick={play}>Play</button>
)

I don't want to use any as that would divert me from applying the correct types for such an instance.

Christian Ivicevic · Accepted Answer · 2019-01-26 23:01:31Z

20

It should most likely be either of the following

(event: React.MouseEvent<HTMLElement>) => void
(event: React.MouseEvent<HTMLInputElement>) => void

You can confirm this by looking at the React typings over here.

edited Jan 26, 2019 at 23:01

answered Jan 26, 2019 at 22:51

Christian Ivicevic

10.9k7 gold badges44 silver badges85 bronze badges

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

4 Comments

Jonca33 Over a year ago

Thank you, Christian. Are you suggesting that inside the handlePlay(event: ...)?

Christian Ivicevic Over a year ago

For play in ButtonProps definitely. handlePlay can omit this if it doesn't use the event in the first place due to the nature of JavaScript allowing parameter omission.

Jonca33 Over a year ago

I'm failing to translate your suggestion into my current code example in the question above. I added onClick={(e: React.MouseEvent<HTMLElement>) => playAgain} but it errors type is not assignable to intrinsic attributes

Christian Ivicevic Over a year ago

@Jonca33 Do it as shown in the answer of Oblosys. It suffices to replace your any that you annotated in the first place with either of our solutions.

Oblosys · Accepted Answer · 2019-01-26 23:18:31Z

13

The easiest solution would be to use the MouseEventHandler type with HTMLButtonElement as the type parameter:

interface ButtonProps {
  play: React.MouseEventHandler<HTMLButtonElement>
}

answered Jan 26, 2019 at 23:18

Oblosys

15.2k3 gold badges33 silver badges41 bronze badges

Comments

shaheb · Accepted Answer · 2023-06-10 09:47:35Z

0

This should work also

import { MouseEventHandler } from "react";

export interface ButtonProps{
    play: MouseEventHandler<HTMLButtonElement>
}

export const Button = ({ play }: ButtonProps ) => (
  <button onClick={play}>Play</button>
)

answered Jun 10, 2023 at 9:47

shaheb

5776 silver badges12 bronze badges

Collectives™ on Stack Overflow

React TypeScript | Correct Type for Event Handler Prop

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related