[ML] Add key prop to error messages map

Author: peteharverson

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row.tsx

@@ -159,13 +159,14 @@ export const ExpandedRow: FC<Props> = ({ item }) => {
       defaultMessage: 'State',
     }),
     items: Object.entries(stateValues).map(([stateKey, stateValue]) => {
-      if (stateKey.toString() === 'state') {
+      const title = stateKey.toString();
+      if (title === 'state') {
         return {
-          title: stateKey.toString(),
+          title,
           description: getTaskStateBadge(getItemDescription(stateValue)),
         };
       }
-      return { title: stateKey.toString(), description: getItemDescription(stateValue) };
+      return { title, description: getItemDescription(stateValue) };
     }),
     position: 'left',
   };

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/messages.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
+import React, { Fragment, FC } from 'react';
 
 import { EuiCallOut, EuiCodeBlock, EuiSpacer } from '@elastic/eui';
 
@@ -18,7 +18,7 @@ export const Messages: FC<Props> = ({ messages }) => {
   return (
     <>
       {messages.map((requestMessage, i) => (
-        <>
+        <Fragment key={i}>
           <EuiCallOut
             title={requestMessage.message}
             color={requestMessage.error !== undefined ? 'danger' : 'primary'}
@@ -32,7 +32,7 @@ export const Messages: FC<Props> = ({ messages }) => {
             )}
           </EuiCallOut>
           <EuiSpacer size="s" />
-        </>
+        </Fragment>
       ))}
     </>
   );