React Material Table action OnClick event for edit and delete does not fire action

Question

In order to disable some action only for some rows I'm trying to overwrite the Action for each row. I followed the answer given here: React Material Table action button markup overriding for multiple actions

Action:
    props => {

      if (typeof props.action === "function"){
            var element= props.action(props.data);
      

            return (
                <Button aria-label={element.icon} size="small"
                    onClick={element.onClick}
                >
                <element.icon/>
                </Button>
                )
        }else{

                return (
                    <Button aria-label={props.action.icon} size="small"
                        onClick={props.action.onClick}
                    >
                        <props.action.icon/>
                    </Button>
                    )



        }
        }

  }}

Everything works well for the action add. A new row within a form is displayed for the add button (the else part of the action). But Nothing is fired for the typeof props.action === "function". There is no error and element.onClick is a onClick function. I tried also

onClick={e => element.onClick}

But it doesn't fire nothin neither.

Any clues or ideas are welcome

Answer 1

I had to to this:

onClick={(event) => element.onClick(event, props.data)}

instead of

onClick={element.onClick}

Answer 2

You should try using:
onClick{(event) => element.onClick(event, props.yourData)}

Passing props with the function is a necessity here.

Hope this helps you

Answer 3

First, assign this to some variable before rendering it to the onClick function. ex see below define var assiigned_this. Then call a function in the following way. Here the assiigned_this is nothing but this and second argument you can pass anything which you need. Here I am passing number 4.

renderRows() {
    var assigned_this = this;
    return (
      <tr key={"item-" + i}>
        <td>
          <button onClick={assigned_this.handleItemOnClick.bind(assigned_this, 4)}>
            Delete
          </button>
        </td>
      </tr>
    );
  }

Now define the click function in the following way.

handleItemOnClick(i) {
   console.log(i)  // It will print 4
  }

Now on click of the handleItemOnClick function, you can see the result in the console.