From 3e7676497f457dc973afd185ad2f10b02ad8140c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chabbey?= Date: Fri, 14 Feb 2020 13:23:16 -0800 Subject: [PATCH] Fix 'child in a list should have a unique key prop' - Each element of a react list should have a unique key prop. This is not the case here, as the key of a cell is generated from its column index. To have unique key, we should use the row and column index. - The ./demo folder, should use the development version of react (at least when you are developing ), otherwise React will NOT show errors/warnings. This is very confusing, as the ./demo folder is used for development purposes. The only way to see the react warning was to change the script tags to point to the development bundle of react. We should point to the correct bundle (e.g, if NODE_ENV is set up to DEVELOPMENT, load the DEV bundle, if NODE_ENV is set up to PRODUCTION, load the PRODUCTION bundle ) - I still get this error in the demo, but not in my component. I guess there are some places where the keys are still not unique. I was not able to find them in the dev tools and did not dig thru the code too much --- demo/index.html | 4 ++-- src/dash-table/components/ControlledTable/index.tsx | 2 +- src/dash-table/derived/cell/contents.tsx | 7 ++++--- src/dash-table/derived/cell/wrappers.tsx | 2 +- src/dash-table/derived/header/wrappers.tsx | 2 +- 5 files changed, 9 insertions(+), 8 deletions(-) diff --git a/demo/index.html b/demo/index.html index 613c17016..a78562ad6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -5,8 +5,8 @@
- - + + diff --git a/src/dash-table/components/ControlledTable/index.tsx b/src/dash-table/components/ControlledTable/index.tsx index 67611e64d..c56bc2cc9 100644 --- a/src/dash-table/components/ControlledTable/index.tsx +++ b/src/dash-table/components/ControlledTable/index.tsx @@ -859,7 +859,7 @@ export default class ControlledTable extends PureComponent > {arrayMap3(row, gridStyle[rowIndex], fragmentClasses[rowIndex], (g, s, c, columnIndex) => (
diff --git a/src/dash-table/derived/cell/contents.tsx b/src/dash-table/derived/cell/contents.tsx index f0a5cb591..f756e311a 100644 --- a/src/dash-table/derived/cell/contents.tsx +++ b/src/dash-table/derived/cell/contents.tsx @@ -143,7 +143,7 @@ class Contents { switch (cellType) { case CellType.Dropdown: return (); case CellType.Input: return (); case CellType.Markdown: return (); } diff --git a/src/dash-table/derived/cell/wrappers.tsx b/src/dash-table/derived/cell/wrappers.tsx index 21aea8388..531a5aedd 100644 --- a/src/dash-table/derived/cell/wrappers.tsx +++ b/src/dash-table/derived/cell/wrappers.tsx @@ -113,7 +113,7 @@ class Wrappers { 'data-dash-row': rowIndex }} classes={classes} - key={`column-${columnIndex}`} + key={`row-${rowIndex}-column-${columnIndex}`} onClick={onClick} onDoubleClick={onDoubleClick} onMouseEnter={onEnter} diff --git a/src/dash-table/derived/header/wrappers.tsx b/src/dash-table/derived/header/wrappers.tsx index 06d0c60ec..2fe55b10e 100644 --- a/src/dash-table/derived/header/wrappers.tsx +++ b/src/dash-table/derived/header/wrappers.tsx @@ -27,7 +27,7 @@ function getter( } return (