Question: I installed "@material-ui/core": "^4.9.2" and "@material-ui/icons": "^4.9.1".

In my form i have several rows, each row has an add button and a remove button. I want the remove button to remove the row from it was clicked. It works fine with regular Button with a "-" character in it. But i want it fancy, so i replaced my Button from an IconButton, and imported the icons to use

```
import {AddCircleOutline,RemoveCircleOutlineOutlined} from "@material-ui/icons";

```

And my IconButton looks like this:

```
        <IconButton
          onClick={props.onRemoveClick}
          className="align-self-center"
          color="info"
          size="sm"
          disabled={props.index > 0 ? false : true}
          <RemoveCircleOutlineOutlined/>
        </IconButton>

```

When the IconButton is hit, the onClick method is called (i know because of logs in my console) but i can't handle the event because it is now undefined.

The funny thing is that if i click on the button area that doesn't correspond to the icon, it works. But obviously i need it to work in the whole area of the button.

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

It is not a binding issue because i already tested it.

Any ideas?

Answer: 
Props that are not cited in the documentation are inherited to their internal `<EnhancedButton />`, so you need to use a wrapper.

```js
      <IconButton
          onClick={(e) => props.onRemoveClick(e)}
          className="align-self-center"
          color="info"
          size="sm"
          disabled={props.index > 0 ? false : true}
          <RemoveCircleOutlineOutlined/>
        </IconButton>

```
I don't know the reason but using `e.currentTarget` helped me to get the button that I wanted and not the material icon inside it.

```
onClick={(e) => {
    return console.log(e.currentTarget)
}}

```