Material UI IconButton onClick doesn't let to handle event

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.

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

Any ideas?

Further testing showed me that the event isn't undefined, it is handled indeed. The issue is that instead of retrieving an valid id (event.target.id) it gives me the empty string "". I need the id of the button in order to identify the row to remove. — Ricardo Álvarez, Feb 14 '20 at 04:57

Mohit Singh · Answer 1 · 2020-02-19T00:28:59.167

1

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

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

edited Feb 19 '20 at 00:28

answered Feb 14 '20 at 02:52

Mohit Singh

498
4
10

Thnaks, but it made things worst. Now the event is not defined on the handler when i call: `e.target.id` I got "TypeError: Cannot read property 'target' of undefined" – Ricardo Álvarez Feb 17 '20 at 15:51
If you need to access event pass along event object. Thats the standard way, if you need event object you simply add a parameter and it works with all other methods too(edited the answer), Either way please accept the answer if it helped you. – Mohit Singh Feb 19 '20 at 00:37

score 0 · Accepted Answer · answered Feb 17 '20 at 16:36

Well you gave an idea. Since i needed an index to identify the row's button, i sended the index through a paramater on the onClick method, like this:

onClick={e => props.onRemoveClick(props.index)}

In this way i didn't need to handle the event. I also had to bind my method on the constructor:

constructor(props) { super(props); this.handleRemoveClick = this.handleRemoveClick.bind(this); }

Now i got the behaviour wanted

score 0 · Answer 3 · answered Oct 26 '20 at 11:06

You can see the github ussue here. There is some problem with typescript definition files but we can work around it.

Solution

I tried to solve it like in the github issue but didn't work. So this works for me.

const onClick = (e: any) => {
    // e is of type any so the compiler won't yell at you

}
<IconButton onClick={(e) => onClick(e)}>

score 0 · Answer 4 · edited Apr 22 '22 at 14:00

0

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)
}}

edited Apr 22 '22 at 14:00

Tyler2P

2,324
26
22
31

answered Apr 20 '22 at 12:32

user16619539

1

Material UI IconButton onClick doesn't let to handle event

4 Answers4