Merge pull request #1778 from plotly/antrg-fix-datatable

antoinerg · web-flow · commit 8a9245304f56 · 2021-09-30T01:23:34.000-04:00
data-table: fixes warning about missing key prop
diff --git a/components/dash-table/CHANGELOG.md b/components/dash-table/CHANGELOG.md
@@ -2,6 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- [#1778](https://github.com/plotly/dash/pull/1778) Fix React warnings stating
+  that each child in a list should have a unique "key" prop
+
 ## [4.12.0] - 2021-07-09
 ### Fixed
 - [#907](https://github.com/plotly/dash-table/pull/907)
diff --git a/components/dash-table/demo/index.html b/components/dash-table/demo/index.html
@@ -5,8 +5,8 @@
     </head>
     <body>
         <div id='root'></div>
-        <script src='https://unpkg.com/react@17.0.1/umd/react.production.min.js'></script>
-        <script src='https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js'></script>
+        <script src='https://unpkg.com/react@16.14.0/umd/react.development.js'></script>
+        <script src='https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js'></script>
 
         <script src="./demo.js"></script>
     </body>
diff --git a/components/dash-table/src/dash-table/derived/header/content.tsx b/components/dash-table/src/dash-table/derived/header/content.tsx
@@ -283,7 +283,7 @@ function getter(
                         );
 
                     return (
-                        <div>
+                        <div key={columnIndex}>
                             {!column_selectable || !selectable ? null : (
                                 <span className='column-header--select'>
                                     <input
diff --git a/components/dash-table/tests/selenium/test_header.py b/components/dash-table/tests/selenium/test_header.py
@@ -127,3 +127,18 @@ def test_head004_change_single_row_header(test):
 
     assert target.column("rows").get_text(0) == "Chill"
     assert test.get_log_errors() == []
+
+
+def test_head005_no_warnings_emitted(test):
+    test.start_server(
+        get_app(dict(merge_duplicate_headers=True)),
+        debug=True,
+        use_reloader=False,
+        use_debugger=True,
+        dev_tools_hot_reload=False,
+    )
+
+    target = test.table("table")
+
+    wait.until(lambda: target.column(6).get().get_attribute("colspan") == "4", 3)
+    assert test.get_logs() == []
