From e6a87839d6f07a7484ba482d4a998b8f68bf7758 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Mon, 26 Jul 2021 11:45:29 +0300
Subject: [PATCH] Island UI: add keys to items in ransomware report, breach
 section

---
 .../src/components/report-components/common/RenderArrays.js | 6 ++++--
 .../report-components/ransomware/BreachSection.tsx          | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderArrays.js b/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderArrays.js
index f06ee4849..692484f27 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderArrays.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderArrays.js
@@ -24,11 +24,13 @@ export let renderLimitedArray = function (array,
     } else {
       element = (<>{array[i]}</>);
     }
-    elements.push(<div className={className}>{element}</div>);
+    elements.push(<div className={className} key={array[i]}>{element}</div>);
   }
   let remainder = array.length - limit;
   if(remainder > 0){
-    elements.push(<div className={className}>&nbsp;and {remainder} more</div>);
+    elements.push(<div className={className} key={'remainder'}>
+      &nbsp;and {remainder} more
+    </div>);
   }
   return elements
 }
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/BreachSection.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/BreachSection.tsx
index 0cf23dfdd..abf7eb277 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/BreachSection.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/BreachSection.tsx
@@ -25,7 +25,7 @@ function BreachSection() {
 function getBreachSectionBody(machines) {
     let machineList = [];
     for(let i = 0; i < machines.length; i++){
-      machineList.push(<li>{getMachine(machines[i])}</li>);
+      machineList.push(getMachine(machines[i]));
     }
     return (
       <div className={'ransomware-breach-section'}>
@@ -39,10 +39,10 @@ function getBreachSectionBody(machines) {
 
 function getMachine(machine) {
   return (
-    <>
+    <li key={machine['hostname']}>
     <b>{machine['hostname']}</b>
       ({renderLimitedArray(machine['ip_addresses'], 2, 'ip-address')}) at {machine['start_time']}
-    </>
+    </li>
   )
 }