Material-table: Warning: Failed prop type: Invalid prop `actions[0]` supplied to `MaterialTable`.

[Captainlonate]

Describe the bug
The following appears in the console: Warning: Failed prop type: Invalid propactions[0]supplied toMaterialTable.

"@material-ui/core": "^4.1.3",
"@material-ui/icons": "^4.2.1",
"material-table": "^1.40.0",

To Reproduce
Steps to reproduce the behavior:

1. Make a new MaterialTable
2. add the actions prop to it like so:

actions={[
  {
    icon: tableIcons['Edit'],
    tooltip: 'Edit Collateral',
    onClick: (event, rowData) => {
      console.log("Clicked", rowData);
    }
  }
]}

Note that you can use Edit, or tableIcons['Edit'] and get the same warning in the console

Note that if you pass a string instead, no prop type failure, but the icon doesn't show up. Instead you just see the first couple of letters of whatever you type. But again, no prop type failure. But I don't want text, I want an icon.

Note that I just copy and pasted the starter code, and all I changed was this action prop

Note that "Edit" is from the following starter code (trimmed down for brevity)

import Edit from '@material-ui/icons/Edit'

const tableIcons = {
  ...
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  ...
}

Expected behavior
No prop type failure

Desktop (please complete the following information):

• Windows 10
• Chrome
• Version 75.0.3770.100

[Kove11]

Per #127

You can fix this error by passing an icon like so: icon: () => <Edit/>

[oze4]

Per #127

You can fix this error by passing an icon like so: icon: () => <Edit/>

This did not work for me... Any suggestions? I've tried just about everything.

[nikhilwbhatia]

+1, Kove's change got rid of that error but then breaks the selection part when it tries to display my icon after selecting a row

[oze4]

I wonder what I'm doing wrong...that syntax doesn't fix this for me :(

[oze4]

I FINALLY FOUND A FIX!

I was previously supplying my actions as objects like this:

actions={[{
    icon: () => <LocationCityOutlined />,
    tooltip: <Typography>ABC</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "abc")
}, {
    icon: () => <Opacity />,
    tooltip: <Typography>XYZ</Typography>,
    onClick: (event, rowData) => handleAction(event, rowData, "xyz")
}]}

_Changing each action to a function resolved this for me!!!_

THE FIX:

actions={[
    rowData => ({ // <-- ***NOW A FUNCTION***
        icon: () => <LocationCityOutlined />,
        tooltip: <Typography>ABC</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "abc")
    }), 
    rowData => ({ // <-- ***NOW A FUNCTION***
        icon: () => <Opacity />,
        tooltip: <Typography>XYZ</Typography>,
        onClick: (event, rowData) => handleAction(event, rowData, "xyz")
    })
]}

[nikhilwbhatia]

Worked for me, thanks!!

[nikhilwbhatia]

Just realized this seems to fix the above issue, but iconProps no longer works when defining actions like this

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.