Property 'value' does not exist on type EventTarget (ts2339)

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?

https://stackoverflow.com/questions/66485576/property-value-does-not-exist-on-type-eventtarget-ts2339 March 05, 2021 at 09:46AM