fix React warnings about spreaded key

epam · Jan 23, 2025 · b8f6051 · b8f6051
1 parent 556effb
commit b8f6051
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/uui-components/src/table/DataTableCellContainer.tsx b/uui-components/src/table/DataTableCellContainer.tsx
@@ -38,6 +38,7 @@ export const DataTableCellContainer = React.forwardRef<HTMLDivElement, DataTable
     return (
         <FlexCell
             { ...props.column }
+            key={ props.column.key }
             minWidth={ 'width' in props.column ? props.column.width : undefined }
             rawProps={ props.rawProps }
             cx={ ['uui-dt-vars', css.root, props.column.cx, props.cx] }

diff --git a/uui/components/tables/DataTable.tsx b/uui/components/tables/DataTable.tsx
@@ -81,11 +81,11 @@ export function DataTable<TItem, TId>(props: React.PropsWithChildren<DataTablePr
     const defaultRenderRow = React.useCallback((rowProps: DataRowProps<TItem, TId> & DataTableRowMods) => {
         return (
             <DataTableRow
-                key={ rowProps.rowKey }
                 size={ props.size || settings.sizes.dataTable.body.row.default as UuiDataTableRowProps['size'] }
                 columnsGap={ props.columnsGap }
                 borderBottom={ props.border }
                 { ...rowProps }
+                key={ rowProps.rowKey }
                 cx={ css.cell }
             />
         );

diff --git a/uui/components/tables/DataTableRow.tsx b/uui/components/tables/DataTableRow.tsx
@@ -15,7 +15,7 @@ import css from './DataTableRow.module.scss';
 // As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
 export const renderCell = (props: DataTableCellProps) => {
     const mods = props.rowProps as DataTableRowMods & DataTableRowProps;
-    return <DataTableCell { ...props } size={ mods.size } columnsGap={ mods.columnsGap } />;
+    return <DataTableCell { ...props } key={ props.key } size={ mods.size } columnsGap={ mods.columnsGap } />;
 };
 
 export const renderDropMarkers = (props: DndActorRenderParams) => <DropMarker { ...props } enableBlocker={ true } />;