I am getting squigglies:

You can see I'm typing it right (I think).

  const hClick = (e:React.MouseEvent<HTMLButtonElement>)=>{
    console.log(e.target.value)
  }

Here's the element in question.

      {props.question.responses.map((r: string, i: number) => {
        return <button key={i} value={r} className={`${CSS.columnBtn} ${CSS.gray}`} onClick={(e) => hClick(e)}>{r}</button>;
      })}

You can see it clearly has a value. I also did my research. Not only do buttons have values natively but MS said in their docs they have a value prop as does the general button element per Mozilla and when I ctrl + clicked into the d.ts file for HTMLButtonElement, it shows a value prop that's a string:

    /**
     * Sets or retrieves the default or selected value of the control.
     */
    value: string;

Morever the code works and it logs the value. I'm pretty new to TypeScript so there's probably something I don't know, and that's what I want to learn.

BTW if a property doesn't exist in a given element but you give it a custom one, it obviously won't be in the d.ts so how would you tell the compiler that your html attribute foo[="bar"] exists on the event?

I am getting squigglies:

You can see I'm typing it right (I think).

  const hClick = (e:React.MouseEvent<HTMLButtonElement>)=>{
    console.log(e.target.value)
  }

Here's the element in question.

      {props.question.responses.map((r: string, i: number) => {
        return <button key={i} value={r} className={`${CSS.columnBtn} ${CSS.gray}`} onClick={(e) => hClick(e)}>{r}</button>;
      })}

You can see it clearly has a value. I also did my research. Not only do buttons have values natively but MS said in their docs they have a value prop as does the general button element per Mozilla and when I ctrl + clicked into the d.ts file for HTMLButtonElement, it shows a value prop that's a string:

    /**
     * Sets or retrieves the default or selected value of the control.
     */
    value: string;

Morever the code works and it logs the value. I'm pretty new to TypeScript so there's probably something I don't know, and that's what I want to learn.

BTW if a property doesn't exist in a given element but you give it a custom one, it obviously won't be in the d.ts so how would you tell the compiler that your html attribute foo[="bar"] exists on the event?

• javascript
• reactjs
• typescript

• 1 What if you use currentTarget instead? – MinusFour Commented Mar 5, 2021 at 1:52

2 Answers 2

Since target could be any other potential element (or even a non-element) you can use a Type Assertion to make it into HTMLButtonElement.

const hClick = (e:React.MouseEvent<HTMLButtonElement>)=>{
    let button = e.target as HTMLButtonElement;
    console.log(button.value)
}

I look on the React Typings and the HTMLButtonElement will end up in currentTarget (which makes sense because that's the element the listener is attached to which is a button).

So you can just use:

const hClick = (e:React.MouseEvent<HTMLButtonElement>)=>{
    console.log(e.currentTarget.value)
}

<input (keyup)="myeventreal($any($event).target.value)" />

use this in angluar 13 version