[data grid] TypeError: Cannot read properties of undefined (reading 'id')

[MiguelG97]

Steps to reproduce

Steps:

1. Pass rows to the datagrid by using useMemo or useState

  const rows = useMemo<GridRowsProp<ITreeFile>>(() => {
    return (selectedFolderItem.files ?? []).map((f) => {
      return { ...f, id: f.id };
    });
  }, [selectedFolderItemId,]);
...
<DataGrid
        apiRef={apiRef}
        disableMultipleRowSelection
        checkboxSelection
        loading={isLoading}
        slotProps={{
          loadingOverlay: {
            variant: "skeleton",
            noRowsVariant: "skeleton",
          },
        }}
        disableColumnResize
        disableColumnMenu
        disableColumnSorting={false}
        disableColumnFilter
        columnHeaderHeight={56}
        rows={rows}
        columns={columns}
        rowBufferPx={10}
        disableVirtualization={false}
        hideFooter={true}
      />

2. Then update rows by removing an item from the array
   In my case I update my redux slice which makes the useMemo to recalculate the rows variable

             dispatch(
            setProjects(
              projects.map((p) => {
                if (p._id === projectId) {
                  return { ...p, folderStructure: updatedFolderItems };
                }
                return p;
              })
            )
          );

4. No issues are thrown when removing items following that workflow and while the list still have items. However, when deleting the last item from the array, the datagrid throws the TypeError: Cannot read properties of undefined (reading 'id') error when an empty array is passed as the row props.

Current behavior

when deleting the last item from the array, the datagrid throws the TypeError: Cannot read properties of undefined (reading 'id') error when an empty array is passed as the row props.

Expected behavior

There are no issues when removing items while the rows array still have items on it. It should work too for the case every items is removed from the row array.

Context

Listing files in data grid and a column has a control to delete the file from the grid.

Your environment

"@mui/x-data-grid": "^7.22.0",

Search keywords: Datagrid

[arminmeh]

Hey @MiguelG97
you didn't specify the version of the grid you are using.
There was a known issue for the error you are facing that is fixed with this PR
If you are not already, can you update to the latest version of the grid and give it another try?

[MiguelG97]

Hi @arminmeh
sorry for the late response. I used the 7.22 version and found a workaround by passing a value to the datagrid key property:
<DataGrid key={rows.length} rows={rows} ... />
This way the internal state of the data grid was reset on every row change.

Back to your suggestion, indeed, the issue seems to be fixed using the latest version, which is 7.23. I don't need to set the key value anymore.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@MiguelG97 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.