Search code examples
material-uiiconbutton

Material UI IconButton onClick doesn't let to handle event

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

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

Any ideas?

Solution

  • 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