From 94f87c72885ba89dda2a39928b5a1aa500fc003e Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 10 Apr 2020 13:28:26 +0200
Subject: [PATCH] Fix react missing key warnings (#23498)

---
 .../components/PanelEditor/FieldConfigEditor.tsx          | 4 ++--
 .../components/PanelEditor/PanelOptionsEditor.tsx         | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx b/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx
index 09c2c65f7a1..6c3a8c0dc28 100644
--- a/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx
@@ -182,9 +182,9 @@ export const DefaultFieldConfigEditor: React.FC<Props> = ({ data, onChange, conf
 
   return (
     <>
-      {Object.keys(groupedConfigs).map(k => {
+      {Object.keys(groupedConfigs).map((k, i) => {
         return (
-          <OptionsGroup title={k}>
+          <OptionsGroup title={k} key={`${k}/${i}`}>
             <>
               {groupedConfigs[k].map(c => {
                 return renderEditor(c);
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelOptionsEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelOptionsEditor.tsx
index 6a4fd89a515..17f9a34fa03 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelOptionsEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelOptionsEditor.tsx
@@ -25,9 +25,9 @@ export const PanelOptionsEditor: React.FC<PanelOptionsEditorProps<any>> = ({ plu
 
   return (
     <>
-      {Object.keys(optionEditors).map(c => {
+      {Object.keys(optionEditors).map((c, i) => {
         const optionsToShow = optionEditors[c]
-          .map((e, i) => {
+          .map((e, j) => {
             if (e.showIf && !e.showIf(options)) {
               return null;
             }
@@ -38,7 +38,7 @@ export const PanelOptionsEditor: React.FC<PanelOptionsEditorProps<any>> = ({ plu
               </Forms.Label>
             );
             return (
-              <Forms.Field label={label} key={`${e.id}/i`}>
+              <Forms.Field label={label} key={`${e.id}/${j}`}>
                 <e.editor
                   value={lodashGet(options, e.path)}
                   onChange={value => onOptionChange(e.path, value)}
@@ -50,7 +50,7 @@ export const PanelOptionsEditor: React.FC<PanelOptionsEditorProps<any>> = ({ plu
           .filter(e => e !== null);
 
         return optionsToShow.length > 0 ? (
-          <OptionsGroup title={c} defaultToClosed>
+          <OptionsGroup title={c} defaultToClosed key={`${c}/${i}`}>
             <div>{optionsToShow}</div>
           </OptionsGroup>
         ) : null;