<DatagridBody> creates the <RecordContext> instead of <DatagridRow>

docs/Datagrid.md

@@ -89,38 +89,39 @@ import {
 import { TableCell, TableRow, Checkbox } from "@mui/material";
 
 const MyDatagridRow = ({
-    record,
-    id,
     onToggleItem,
     children,
     selected,
     selectable,
-}: DatagridRowProps) =>
-    id ? (
-        <RecordContextProvider value={record}>
-            <TableRow>
-                {/* first column: selection checkbox */}
-                <TableCell padding="none">
-                    {selectable && (
-                        <Checkbox
-                            checked={selected}
-                            onClick={(event) => {
-                                if (onToggleItem) {
-                                    onToggleItem(id, event);
-                                }
-                            }}
-                        />
-                    )}
-                </TableCell>
-                {/* data columns based on children */}
-                {React.Children.map(children, (field) =>
-                    React.isValidElement<FieldProps>(field) && field.props.source ? (
-                        <TableCell key={`${id}-${field.props.source}`}>{field}</TableCell>
-                    ) : null
+}: DatagridRowProps) => {
+    const record = useRecordContext();
+    return record ? (
+        <TableRow>
+            {/* first column: selection checkbox */}
+            <TableCell padding="none">
+                {selectable && (
+                    <Checkbox
+                        checked={selected}
+                        onClick={event => {
+                            if (onToggleItem) {
+                                onToggleItem(record.id, event);
+                            }
+                        }}
+                    />
                 )}
-            </TableRow>
-        </RecordContextProvider>
+            </TableCell>
+            {/* data columns based on children */}
+            {React.Children.map(children, field =>
+                React.isValidElement<FieldProps>(field) &&
+                field.props.source ? (
+                    <TableCell key={`${record.id}-${field.props.source}`}>
+                        {field}
+                    </TableCell>
+                ) : null
+            )}
+        </TableRow>
     ) : null;
+};
 
 const MyDatagridBody = (props: DatagridBodyProps) => (
     <DatagridBody {...props} row={<MyDatagridRow />} />

docs/Upgrade.md

@@ -759,6 +759,51 @@ Besides, the buttons passed as `bulkActionButtons` no longer receive any prop. I
 
 The deprecated `<PaginationLimit>` component was removed.
 
+### `<DatagridBody>` No Longer Provides `record` Prop To `<DatagridRow>`
+
+The `<DatagridBody>` component no longer provides a `record` prop to its `<DatagridRow>` children. Instead, it provides a `RecordContext` for each row: 
+
+```diff
+const MyDatagridRow = ({
+-    record,
+-    id,
+     onToggleItem,
+     children,
+     selected,
+     selectable,
+}: DatagridRowProps) => {
++    const record = useRecordContext();
++    return record ? (
+-         <RecordContextProvider value={record}>
+          <TableRow>
+              </TableCell>
+                  {selectable && (
+                      <Checkbox
+                          checked={selected}
+                          onClick={event => {
+                              if (onToggleItem) {
+-                                      onToggleItem(id, event);
++                                      onToggleItem(record.id, event);
+                              }
+                          }}
+                      />
+                  )}
+              </TableCell>
+              {React.Children.map(children, field =>
+                  React.isValidElement<FieldProps>(field) &&
+                  field.props.source ? (
+-                         <TableCell key={`${id}-${field.props.source}`}>{field}</TableCell>
++                         <TableCell key={`${record.id}-${field.props.source}`}>{field}</TableCell>
+                  ) : null
+              )}
+          </TableRow>
+-         </RecordContextProvider>
+     ) : null;
+};
+```
+
+See the [`<Datagrid body/>`](./Datagrid.md#body) documentation to learn how to create your own row component.
+
 ## Show and Edit Pages
 
 ### Custom Edit or Show Actions No Longer Receive Any Props
@@ -1206,9 +1251,6 @@ The deprecated `<ThemeProvider theme>` prop was removed. Use the `ThemesContext.
 
 The `data-generator-retail` package has been updated to provide types for all its records. In the process, we renamed the `commands` resource to `orders`. Accordingly, the `nb_commands` property of the `customers` resource has been renamed to `nb_orders` and the `command_id` property of the `invoices` and `reviews` resources has been renamed to `order_id`.
 
-
-
-
 ## Upgrading to v4
 
 If you are on react-admin v3, follow the [Upgrading to v4](https://marmelab.com/react-admin/doc/4.16/Upgrade.html) guide before upgrading to v5.

packages/ra-ui-materialui/src/list/datagrid/DatagridBody.tsx

@@ -3,7 +3,7 @@ import { cloneElement, memo, FC, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { SxProps, TableBody, TableBodyProps } from '@mui/material';
 import clsx from 'clsx';
-import { Identifier, RaRecord } from 'ra-core';
+import { Identifier, RaRecord, RecordContextProvider } from 'ra-core';
 
 import { DatagridClasses } from './useDatagridStyles';
 import DatagridRow, { PureDatagridRow, RowClickFunction } from './DatagridRow';
@@ -34,31 +34,35 @@ const DatagridBody: FC<DatagridBodyProps> = React.forwardRef(
             className={clsx('datagrid-body', className, DatagridClasses.tbody)}
             {...rest}
         >
-            {data.map((record, rowIndex) =>
-                cloneElement(
-                    row,
-                    {
-                        className: clsx(DatagridClasses.row, {
-                            [DatagridClasses.rowEven]: rowIndex % 2 === 0,
-                            [DatagridClasses.rowOdd]: rowIndex % 2 !== 0,
-                        }),
-                        expand,
-                        hasBulkActions: hasBulkActions && !!selectedIds,
-                        hover,
-                        id: record.id ?? `row${rowIndex}`,
-                        key: record.id ?? `row${rowIndex}`,
-                        onToggleItem,
-                        record,
-                        resource,
-                        rowClick,
-                        selectable: !isRowSelectable || isRowSelectable(record),
-                        selected: selectedIds?.includes(record.id),
-                        sx: rowSx?.(record, rowIndex),
-                        style: rowStyle?.(record, rowIndex),
-                    },
-                    children
-                )
-            )}
+            {data.map((record, rowIndex) => (
+                <RecordContextProvider
+                    value={record}
+                    key={record.id ?? `row${rowIndex}`}
+                >
+                    {cloneElement(
+                        row,
+                        {
+                            className: clsx(DatagridClasses.row, {
+                                [DatagridClasses.rowEven]: rowIndex % 2 === 0,
+                                [DatagridClasses.rowOdd]: rowIndex % 2 !== 0,
+                            }),
+                            expand,
+                            hasBulkActions: hasBulkActions && !!selectedIds,
+                            hover,
+                            id: record.id ?? `row${rowIndex}`,
+                            onToggleItem,
+                            resource,
+                            rowClick,
+                            selectable:
+                                !isRowSelectable || isRowSelectable(record),
+                            selected: selectedIds?.includes(record.id),
+                            sx: rowSx?.(record, rowIndex),
+                            style: rowStyle?.(record, rowIndex),
+                        },
+                        children
+                    )}
+                </RecordContextProvider>
+            ))}
         </TableBody>
     )
 );