From 4657250bcf3399cfe54615249ec8f55149dcbc18 Mon Sep 17 00:00:00 2001
From: Cody Leff <cody@preset.io>
Date: Wed, 30 Nov 2022 05:36:16 -0700
Subject: [PATCH] chore(dashboard): Fix missing React key errors (#22266)

---
 .../nativeFilters/FilterBar/FilterControls/FilterControls.tsx | 4 ++--
 .../components/nativeFilters/FilterCard/ScopeRow.tsx          | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
index 0da90351f..c45b54ebe 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -90,7 +90,7 @@ const FilterControls: FC<FilterControlsProps> = ({
   const renderer = useCallback(
     ({ id }: Filter | Divider) => {
       const index = filtersWithValues.findIndex(f => f.id === id);
-      return <OutPortal node={portalNodes[index]} inView />;
+      return <OutPortal key={id} node={portalNodes[index]} inView />;
     },
     [filtersWithValues, portalNodes],
   );
@@ -207,7 +207,7 @@ const FilterControls: FC<FilterControlsProps> = ({
       {portalNodes
         .filter((node, index) => filterIds.has(filtersWithValues[index].id))
         .map((node, index) => (
-          <InPortal node={node}>
+          <InPortal node={node} key={filtersWithValues[index].id}>
             {filterControlFactory(
               index,
               filterBarOrientation,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
index 8da224c0e..0c0704089 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/ScopeRow.tsx
@@ -76,7 +76,9 @@ export const ScopeRow = React.memo(({ filter }: FilterCardRowProps) => {
             ? Object.values(scope)
                 .flat()
                 .map((element, index) => (
-                  <span>{index === 0 ? element : `, ${element}`}</span>
+                  <span key={element}>
+                    {index === 0 ? element : `, ${element}`}
+                  </span>
                 ))
             : t('None')}
         </RowValue>