I am getting squigglies:

[![enter image description here](https://i.stack.imgur.com/HFJBu.png)](https://i.stack.imgur.com/HFJBu.png)

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

```js
  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](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.htmlbuttonelement.html#value) they have a value prop as does the [general button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-value) per Mozilla and when I ctrl + clicked into the d.ts file for HTMLButtonElement, it shows a value prop that's a string:

```js
    /**
     * 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?