How to properly type a button click in React?

Question

I have a button, on click on which I need to get the name of the button. How to correctly type event event by typescript? No matter how I tried it, it throws an error.

  const handleSortReports= (event : ??? ) => {
    const {name} = event.target
    console.log(name)
  }

<button id="Period" name="Period" type="button" onClick={handleSortReports}>Test</button>

Arman · Accepted Answer · 2022-08-08 10:57:01Z

2

You can use React.MouseEvent

    const handleSortReports= (event : React.MouseEvent<HTMLButtonElement> ) => {
    const button: HTMLButtonElement = event.currentTarget;
    console.log(button.name);
  }

edited Aug 8, 2022 at 10:57

answered Aug 8, 2022 at 10:51

Arman

8215 silver badges15 bronze badges

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

2 Comments

user18119766 Over a year ago

If I use your answer I have this error - TS2339: Property 'name' does not exist on type 'EventTarget'.

Arman Over a year ago

@Timofeus91 I've updated my answer. Please check again.

Collectives™ on Stack Overflow

How to properly type a button click in React?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related