Fix React warning about spreading key in props

buildo · Oct 17, 2024 · 427d3cd · 427d3cd
1 parent dc7e752
commit 427d3cd
Show file tree

Hide file tree

Showing 3 changed files with 666 additions and 725 deletions.
diff --git a/packages/bento-design-system/package.json b/packages/bento-design-system/package.json
@@ -190,8 +190,8 @@
     "playroom": "0.32.1",
     "postcss": "8.4.47",
     "prettier": "2.8.8",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "storybook": "8.0.8",
     "style-loader": "3.3.4",
     "ts-loader": "9.4.4",

diff --git a/packages/bento-design-system/src/Table/Table.tsx b/packages/bento-design-system/src/Table/Table.tsx
@@ -375,20 +375,24 @@ export function Table<
     rowIndex: number,
     interactiveRow: boolean
   ) {
-    return cells.map((cell, index) => (
-      <CellContainer
-        {...cell.getCellProps()}
-        index={rowIndex}
-        lastLeftSticky={index === lastStickyColumnIndex}
-        style={stickyLeftColumnStyle[cell.column.id]}
-        first={index === 0}
-        last={(index + 1) % flatColumns.length === 0}
-        interactiveRow={interactiveRow}
-        withDividers={withDividers}
-      >
-        {cell.render("Cell")}
-      </CellContainer>
-    ));
+    return cells.map((cell, index) => {
+      const { key, ...cellProps } = cell.getCellProps();
+      return (
+        <CellContainer
+          key={key}
+          {...cellProps}
+          index={rowIndex}
+          lastLeftSticky={index === lastStickyColumnIndex}
+          style={stickyLeftColumnStyle[cell.column.id]}
+          first={index === 0}
+          last={(index + 1) % flatColumns.length === 0}
+          interactiveRow={interactiveRow}
+          withDividers={withDividers}
+        >
+          {cell.render("Cell")}
+        </CellContainer>
+      );
+    });
   }
 
   const rowsToRender = virtualizeRows
@@ -581,6 +585,7 @@ function ColumnHeader<D extends Record<string, unknown>>({
   ) : null;
 
   const hasHeaderContent = column.Header || hint || sortIcon;
+  const { key: _key, ...headerProps } = column.getHeaderProps(column.getSortByToggleProps());
 
   return (
     <Box
@@ -598,7 +603,7 @@ function ColumnHeader<D extends Record<string, unknown>>({
         className={[columnHeader({ withDividers, first, lastLeftSticky })]}
         background={config.headerBackgroundColor}
         color={config.headerForegroundColor}
-        {...column.getHeaderProps(column.getSortByToggleProps())}
+        {...headerProps}
         textAlign={column.align}
         {...config.padding.header}
       >