From 6bf05d89e7991f4db2217d28cbde7de69f17f483 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <tymek+gpg@getunleash.ai>
Date: Mon, 8 Aug 2022 11:36:33 +0200
Subject: [PATCH] fix react key warning

---
 .../FeatureResultInfoPopoverCell.styles.ts                   | 2 --
 .../PlaygroundResultFeatureStrategyList.tsx                  | 2 +-
 .../playgroundResultStrategyLists.tsx                        | 5 +++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts
index ecbfd67489..3ad2f16301 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.styles.ts
@@ -4,9 +4,7 @@ export const useStyles = makeStyles()(theme => ({
     popoverPaper: {
         display: 'flex',
         flexDirection: 'column',
-        // alignItems: 'flex-start',
         padding: theme.spacing(6),
-        // maxWidth: '728px',
         width: 728,
         maxWidth: '100%',
         height: 'auto',
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx
index 00d93fb271..afb51096ef 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultFeatureStrategyList.tsx
@@ -25,7 +25,7 @@ export const PlaygroundResultFeatureStrategyList = ({
                 show={
                     <Alert severity={'info'} color={'info'}>
                         If environment would be enabled then this feature would
-                        be {feature.strategies.result ? 'TRUE' : 'FALSE'} and
+                        be {feature.strategies?.result ? 'TRUE' : 'FALSE'} and
                         the strategies would evaluate like this:{' '}
                     </Alert>
                 }
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx
index 5c4099be76..1b48a207f5 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx
@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import { Alert, Box, styled, Typography } from '@mui/material';
 import {
     PlaygroundFeatureSchema,
@@ -46,7 +47,7 @@ export const PlaygroundResultStrategyLists = ({
                 >{`Strategies (${strategies.length})`}</Typography>
                 <Box sx={{ width: '100%' }}>
                     {strategies.map((strategy, index) => (
-                        <>
+                        <Fragment key={strategy.id}>
                             <ConditionallyRender
                                 condition={index > 0}
                                 show={<StrategySeparator text="OR" />}
@@ -58,7 +59,7 @@ export const PlaygroundResultStrategyLists = ({
                                 compact={compact}
                                 input={input}
                             />
-                        </>
+                        </Fragment>
                     ))}
                 </Box>
             </>