Ad

React Material Table Action OnClick Event For Edit And Delete Does Not Fire Action

- 1 answer

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

Ad

Answer

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

Passing props with the function is a necessity here.

Hope this helps you

Ad
source: stackoverflow.com
Ad