From 54f1b351619508dadc510f114f31282385435dd1 Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Mon, 21 Mar 2022 17:47:48 -0400
Subject: [PATCH] chore: add missing keys to components inside lists (#19161)

---
 .../DndColumnSelectControl/DndColumnSelect.tsx     |  1 +
 .../src/views/CRUD/welcome/Welcome.tsx             |  9 +++++++--
 superset-frontend/src/views/components/Menu.tsx    |  7 ++++---
 .../src/views/components/MenuRight.tsx             | 14 ++++++++------
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
index fd360a5e36..c68ee009ea 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
@@ -143,6 +143,7 @@ export function DndColumnSelect(props: DndColumnSelectProps) {
       optionSelector.values.map((column, idx) =>
         isFeatureEnabled(FeatureFlag.ENABLE_DND_WITH_CLICK_UX) ? (
           <ColumnSelectPopoverTrigger
+            key={idx}
             columns={popoverOptions}
             onColumnEdit={newColumn => {
               if (isColumnMeta(newColumn)) {
diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
index eb9fd6eadb..28ad652965 100644
--- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
@@ -134,8 +134,13 @@ const WelcomeNav = styled.div`
 
 export const LoadingCards = ({ cover }: LoadingProps) => (
   <CardContainer showThumbnails={cover} className="loading-cards">
-    {[...new Array(loadingCardCount)].map(() => (
-      <ListViewCard cover={cover ? false : <></>} description="" loading />
+    {[...new Array(loadingCardCount)].map((_, index) => (
+      <ListViewCard
+        key={index}
+        cover={cover ? false : <></>}
+        description=""
+        loading
+      />
     ))}
   </CardContainer>
 );
diff --git a/superset-frontend/src/views/components/Menu.tsx b/superset-frontend/src/views/components/Menu.tsx
index 92d6490408..8f6e4a6785 100644
--- a/superset-frontend/src/views/components/Menu.tsx
+++ b/superset-frontend/src/views/components/Menu.tsx
@@ -205,7 +205,7 @@ export function Menu({
 }: MenuProps) {
   const [showMenu, setMenu] = useState<MenuMode>('horizontal');
   const screens = useBreakpoint();
-  const uiConig = useUiConfig();
+  const uiConfig = useUiConfig();
   const theme = useTheme();
 
   useEffect(() => {
@@ -221,7 +221,7 @@ export function Menu({
   }, []);
 
   const standalone = getUrlParam(URL_PARAMS.standalone);
-  if (standalone || uiConig.hideNav) return <></>;
+  if (standalone || uiConfig.hideNav) return <></>;
 
   const renderSubMenu = ({
     label,
@@ -297,8 +297,9 @@ export function Menu({
             data-test="navbar-top"
             className="main-nav"
           >
-            {menu.map(item => {
+            {menu.map((item, index) => {
               const props = {
+                index,
                 ...item,
                 isFrontendRoute: isFrontendRoute(item.url),
                 childs: item.childs?.map(c => {
diff --git a/superset-frontend/src/views/components/MenuRight.tsx b/superset-frontend/src/views/components/MenuRight.tsx
index 5753ef5311..6495b62912 100644
--- a/superset-frontend/src/views/components/MenuRight.tsx
+++ b/superset-frontend/src/views/components/MenuRight.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { MainNav as Menu } from 'src/components/Menu';
 import { t, styled, css, SupersetTheme } from '@superset-ui/core';
 import { Link } from 'react-router-dom';
@@ -195,22 +195,22 @@ const RightMenu = ({
               if (menu.childs) {
                 return canDatabase || canUpload ? (
                   <SubMenu
-                    key="sub2"
+                    key={`sub2_${menu.label}`}
                     className="data-menu"
                     title={menuIconAndLabel(menu)}
                   >
                     {menu.childs.map((item, idx) =>
                       typeof item !== 'string' && item.name && item.perm ? (
-                        <>
+                        <Fragment key={item.name}>
                           {idx === 2 && <Menu.Divider />}
-                          <Menu.Item key={item.name}>
+                          <Menu.Item>
                             {item.url ? (
                               <a href={item.url}> {item.label} </a>
                             ) : (
                               item.label
                             )}
                           </Menu.Item>
-                        </>
+                        </Fragment>
                       ) : null,
                     )}
                   </SubMenu>
@@ -257,7 +257,9 @@ const RightMenu = ({
                 return null;
               })}
             </Menu.ItemGroup>,
-            index < settings.length - 1 && <Menu.Divider />,
+            index < settings.length - 1 && (
+              <Menu.Divider key={`divider_${index}`} />
+            ),
           ])}
 
           {!navbarRight.user_is_anonymous && [