Column prop render functions

[dalemarchand]

I'm encountering the new warning message "The columns provided to material table are static, but contain functions which update on every render, resetting the table state. Provide a stable function or column reference or an row id to prevent state loss."

I'm at a loss as to how to resolve it. I'm passing in a render function that depends on the data contents for each row in that column. Here's one example:

const ItemList = (props) => {
return (

{props.list.map((text) => {
const t = text.replace('\n', '; ');
return (

<ListItemText key={t+'_text'} primary={t} />

)})}

)}

And my MaterialTable has:
columns={[
{ title: 'Timestamp', field: 'timestamp', filterPlaceholder: 'Search Timestamp', defaultSort: 'desc' },
{
title: 'Status', field: 'status', render: rowData => <ItemList list={rowData.status.map(item => xlateResultStatus(item))} />
},
{
title: 'Detail', field: 'detail', render: rowData =>
}]}

Advice on an approach to avoid the warning?

[oze4]

It would be easier to help if you used one of our CodeSandbox templates and created a demo of this issue.

You may need to memoize or use a ref.

[dalemarchand]

Where do I find these templates?

I believe this demo:

https://material-table-core.com/demos/columns/render-image

should generate the warning as well.

[oze4]

https://github.com/material-table-core/core/blob/master/.github/ISSUE_TEMPLATE/bug_report.md

[oze4]

Website is prob on a diff version thats why it doesn't happen there.

[oze4]

FYI - I updated the version the website uses to the current version and still no warning. This is why it's just easier on everyone to provide a working demo up front. There's no back and forth. The issue is clear to see and easy to edit. All we're asking is for you to help us help you!

[dalemarchand]

Thanks, working on a demo

[oze4]

Since this is more of an issue/bug/question than anything, I have moved it here