Use renderExpandableRow and onRowClick for expand row will have console warning.

I have table with expanded row, for my understanding if I click the arrow icon will trigger renderExpandableRow setting, and if I have expandableRowsOnClick: true, then when I click the row not the > icon will trigger onRowClick function (correct me if I’m wrong) But when I add my custom click action in renderExpandableRow(click the arrow icon), then my row won’t be expanded and will have an error message in my console below. Any way I can trigger extra events for the renderExpandableRow option so I can fetch more data? Because some of my users click the icon instead of the whole row, so I need to fetch more data on both click events.

Here’s my codeSandBox

ndex.js:1437 Warning: Cannot update a component (ConnectFunction) while rendering a different component (n). To locate the bad setState() call inside n, follow the stack trace as described in https://fb.me/setstate-in-render in n (created by WithStyles(n)) in WithStyles(n) (created by t) in table (created by ForwardRef(Table)) in ForwardRef(Table) (created by WithStyles(ForwardRef(Table))) in WithStyles(ForwardRef(Table)) (created by t) in Unknown (created by t) in div (created by t) in div (created by ForwardRef(Paper)) in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper))) in WithStyles(ForwardRef(Paper)) (created by t) in t (created by WithStyles(t)) or this error you can see in my codeSandBox

Thank you so much for your help!

Your Environment

Tech	Version
Material-UI	4.11
MUI-datatables	3.1.3
React	16.8
browser	chrome
etc

[kalyan542]

The renderExpandableRow method isn’t asynchronous, so you can’t do it like that.

One idea could be to return a component, and that component would handle making the API call and updating itself. Ex:

renderExpandableRow: (rowData, rowMeta) => {
    return <ExpandableRowEntry rowData={rowData} rowMeta={rowMeta} />
}

Thanks for the quick reply. It’s working as expected. Thank you

[patorjk]

The renderExpandableRow method isn’t asynchronous, so you can’t do it like that.

One idea could be to return a component, and that component would handle making the API call and updating itself. Ex:

renderExpandableRow: (rowData, rowMeta) => {
    return <ExpandableRowEntry rowData={rowData} rowMeta={rowMeta} />
}