From 58d6d072be3460f64f760c186a9335e9c436b461 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Fri, 15 Dec 2023 12:38:20 +0530
Subject: [PATCH 1/5] refactor: key missing prop

---
 src/components/ButtonGroupIp.res              |  4 +-
 src/components/Chip.res                       | 46 ++++++++-----------
 src/components/CollapsableTableRow.res        |  5 +-
 .../RoutingRevamp/AddRuleGateway.res          |  2 +-
 .../RoutingRevamp/AdvancedRoutingUIUtils.res  |  1 +
 5 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/src/components/ButtonGroupIp.res b/src/components/ButtonGroupIp.res
index 58fd16ccb..cf0953ab8 100644
--- a/src/components/ButtonGroupIp.res
+++ b/src/components/ButtonGroupIp.res
@@ -13,10 +13,11 @@ let make = (
 
   let buttons =
     options
-    ->Js.Array2.map(op => {
+    ->Array.mapWithIndex((op, i) => {
       let active = input.value->LogicUtils.getStringFromJson("") === op.value
       if isSeparate {
         <Button
+          key={i->string_of_int}
           text={op.label}
           onClick={_ => onChange(op.value)}
           buttonType={active ? Primary : SecondaryFilled}
@@ -26,6 +27,7 @@ let make = (
         />
       } else {
         <Button
+          key={i->string_of_int}
           text={op.label}
           onClick={_ => onChange(op.value)}
           textStyle={active ? "text-blue-800" : ""}
diff --git a/src/components/Chip.res b/src/components/Chip.res
index a869d2b76..ebe2ed923 100644
--- a/src/components/Chip.res
+++ b/src/components/Chip.res
@@ -1,29 +1,23 @@
 @react.component
 let make = (~values=[], ~showButton=false, ~onButtonClick=_ => (), ~converterFn=str => str) => {
-  <div>
-    {if values->Js.Array2.length !== 0 {
-      <div className="flex flex-wrap flex-row">
-        {values
-        ->Js.Array2.map(value => {
-          let onClick = _evt => {
-            onButtonClick(value)
-          }
-          <div
-            className="px-4 py-2 m-2 mr-0.5 rounded-full border border-gray-300 bg-gradient-to-b from-jp-gray-200 to-jp-gray-300 dark:from-jp-gray-950 dark:to-jp-gray-950 text-gray-500  hover:shadow dark:text-jp-gray-text_darktheme dark:text-opacity-50  flex align-center w-max cursor-pointer  transition duration-300 ease">
-            {React.string(value->converterFn)}
-            {if showButton {
-              <div className="float-right cursor-pointer mt-0.5 ml-0.5 opacity-50">
-                <Icon className="align-middle" size=14 name="times" onClick />
-              </div>
-            } else {
-              React.null
-            }}
-          </div>
-        })
-        ->React.array}
-      </div>
-    } else {
-      React.null
-    }}
-  </div>
+  <UIUtils.RenderIf condition={values->Js.Array2.length !== 0}>
+    <div className="flex flex-wrap flex-row">
+      {values
+      ->Js.Array2.map(value => {
+        let onClick = _evt => {
+          onButtonClick(value)
+        }
+        <div
+          className="px-4 py-2 m-2 mr-0.5 rounded-full border border-gray-300 bg-gradient-to-b from-jp-gray-200 to-jp-gray-300 dark:from-jp-gray-950 dark:to-jp-gray-950 text-gray-500  hover:shadow dark:text-jp-gray-text_darktheme dark:text-opacity-50  flex align-center w-max cursor-pointer  transition duration-300 ease">
+          {React.string(value->converterFn)}
+          <UIUtils.RenderIf condition={showButton}>
+            <div className="float-right cursor-pointer mt-0.5 ml-0.5 opacity-50">
+              <Icon className="align-middle" size=14 name="times" onClick />
+            </div>
+          </UIUtils.RenderIf>
+        </div>
+      })
+      ->React.array}
+    </div>
+  </UIUtils.RenderIf>
 }
diff --git a/src/components/CollapsableTableRow.res b/src/components/CollapsableTableRow.res
index a2b73ee39..fe1a81be8 100644
--- a/src/components/CollapsableTableRow.res
+++ b/src/components/CollapsableTableRow.res
@@ -45,7 +45,8 @@ let make = (
           let cursorI = cellIndex == 0 ? "cursor-pointer" : ""
           let location = `${title}_tr${(rowIndex + 1)->Belt.Int.toString}_td${(cellIndex + 1)
               ->Belt.Int.toString}`
-          <AddDataAttributes attributes=[("data-table-location", location)]>
+          <AddDataAttributes
+            key={cellIndex->string_of_int} attributes=[("data-table-location", location)]>
             <td
               key={string_of_int(cellIndex)}
               className={`h-full p-0 align-top ${borderClass} ${hCell} ${cursorI}`}
@@ -81,7 +82,7 @@ let make = (
         {item
         ->Js.Array2.mapi((obj, index) => {
           let heading = headingArray->Belt.Array.get(index)->Belt.Option.getWithDefault("")
-          <UIUtils.RenderIf condition={index !== 0}>
+          <UIUtils.RenderIf condition={index !== 0} key={index->string_of_int}>
             <div className="flex mb-5 justify-between">
               <div className="text-jp-gray-900 opacity-50 font-medium">
                 {React.string(heading)}
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
index d3ea4e15b..4ee5031aa 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AddRuleGateway.res
@@ -169,7 +169,7 @@ let make = (~id, ~gatewayOptions, ~isFirst=false, ~isExpanded=false) => {
         {selectedOptions
         ->Array.mapWithIndex((item, i) => {
           let key = string_of_int(i + 1)
-          <div className="flex flex-row">
+          <div key className="flex flex-row">
             <div
               className="w-min flex flex-row items-center justify-around gap-2 h-10 rounded-md  border border-jp-gray-500 dark:border-jp-gray-960
                text-jp-gray-900 text-opacity-75 hover:text-opacity-100 dark:text-jp-gray-text_darktheme dark:hover:text-jp-gray-text_darktheme
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index 10d32844e..f2d08737e 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -417,6 +417,7 @@ module MakeRuleField = {
     <div className="flex flex-wrap items-center">
       {Array.mapWithIndex(fields, (_, i) =>
         <RuleFieldBase
+          key={i->string_of_int}
           onClick={_ => onCrossClick(i)}
           isFirst={i === 0}
           id={`${ruleJsonPath}[${i->Belt.Int.toString}]`}

From 4bfebf9f798d073052fc8b9fbceb3ec3931a557f Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Fri, 15 Dec 2023 13:02:01 +0530
Subject: [PATCH 2/5] refactor: key fix

---
 .../Routing/AdvancedRouting/RoutingPreviewer.res    | 13 +++++--------
 .../RoutingRevamp/AdvancedRoutingUIUtils.res        |  3 ++-
 .../HyperSwitch/SwitchMerchant/SwitchMerchant.res   |  4 ++--
 .../HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res      |  1 +
 .../HyperSwitch/Utils/HSSelfServeSidebar.res        |  8 ++++++--
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res b/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res
index f4f65963e..951b18891 100644
--- a/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res
+++ b/src/screens/HyperSwitch/Routing/AdvancedRouting/RoutingPreviewer.res
@@ -4,7 +4,7 @@ open RoutingUtils
 module SimplePreview = {
   @react.component
   let make = (~gateways) => {
-    if gateways->Js.Array2.length > 0 {
+    <UIUtils.RenderIf condition={gateways->Js.Array2.length > 0}>
       <div
         className="w-full mb-6 p-4 px-6 bg-white dark:bg-jp-gray-lightgray_background rounded-md border border-jp-gray-600 dark:border-jp-gray-850">
         <div
@@ -23,9 +23,7 @@ module SimplePreview = {
           ->React.array}
         </div>
       </div>
-    } else {
-      React.null
-    }
+    </UIUtils.RenderIf>
   }
 }
 module GatewayView = {
@@ -189,16 +187,15 @@ module RulePreviewer = {
                       {React.string(string_of_int(index + 1))}
                     </div>
                     <div> {gateway->React.string} </div>
-                    {if index !== ruleInfo.default_gateways->Js.Array2.length - 1 {
+                    <UIUtils.RenderIf
+                      condition={index !== ruleInfo.default_gateways->Js.Array2.length - 1}>
                       <Icon
                         name="chevron-right"
                         size=14
                         className="cursor-pointer text-jp-gray-700"
                         onClick={ev => ()}
                       />
-                    } else {
-                      React.null
-                    }}
+                    </UIUtils.RenderIf>
                   </div>
                 })
                 ->React.array}
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
index f2d08737e..31f8ce1d6 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRoutingUIUtils.res
@@ -19,9 +19,10 @@ module LogicalOps = {
 
     <ButtonGroup wrapperClass="flex flex-row mr-2 ml-1">
       {["AND", "OR"]
-      ->Js.Array2.map(text => {
+      ->Array.mapWithIndex((text, i) => {
         let active = logicalOpsInput.value->LogicUtils.getStringFromJson("") === text
         <Button
+          key={i->string_of_int}
           text
           onClick={_ => onChange(text)}
           textStyle={active ? "text-blue-800" : ""}
diff --git a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
index c513079d5..108ccd419 100644
--- a/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
+++ b/src/screens/HyperSwitch/SwitchMerchant/SwitchMerchant.res
@@ -142,8 +142,8 @@ module ExternalUser = {
                 {props => <>
                   <div className="px-1 py-1 ">
                     {options
-                    ->Js.Array2.map(option =>
-                      <Menu.Item>
+                    ->Js.Array2.mapi((option, i) =>
+                      <Menu.Item key={i->string_of_int}>
                         {props =>
                           <div className="relative">
                             <button
diff --git a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
index fc7e3f54f..fc2b730c0 100644
--- a/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
+++ b/src/screens/HyperSwitch/ThreeDSFlow/HSwitchThreeDS.res
@@ -65,6 +65,7 @@ module Configure3DSRule = {
           let id = {`algorithm.rules[${string_of_int(index)}]`}
           let i = 1
           <AdvancedRouting.Wrapper
+            key={index->string_of_int}
             id
             heading={`Rule ${string_of_int(index + i)}`}
             onClickAdd={_ => addRule(index, false)}
diff --git a/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res b/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res
index ed55e92a0..110caefcf 100644
--- a/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res
+++ b/src/screens/HyperSwitch/Utils/HSSelfServeSidebar.res
@@ -62,7 +62,10 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => {
       }
       let subOptionsArray = sidebarOption.subOptions->Belt.Option.getWithDefault([])
 
-      <div className={`p-6 border-y border-gray-200 cursor-pointer ${background}`} onClick>
+      <div
+        key={i->string_of_int}
+        className={`p-6 border-y border-gray-200 cursor-pointer ${background}`}
+        onClick>
         <div
           key={i->Belt.Int.toString}
           className={`grid grid-cols-12 items-center  ${textColor} font-medium gap-5`}>
@@ -79,7 +82,7 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => {
           condition={sidebarOption.status === ONGOING && subOptionsArray->Array.length > 0}>
           <div className="my-4">
             {subOptionsArray
-            ->Js.Array2.map(subOption => {
+            ->Js.Array2.mapi((subOption, i) => {
               let (subIcon, subIconColor, subBackground, subFont) = switch subOption.status {
               | COMPLETED => ("check", "green", "", "text-gray-600")
               | PENDING => ("nonselected", "text-gray-100", "", "text-gray-400")
@@ -87,6 +90,7 @@ let make = (~heading, ~sidebarOptions: array<sidebarOption>=[]) => {
               }
 
               <div
+                key={i->string_of_int}
                 className={`flex gap-1 items-center pl-6 py-2 rounded-md my-1 ${subBackground} ${subFont}`}>
                 <Icon name=subIcon customIconColor=subIconColor customHeight="14" />
                 <span className="flex-1"> {subOption.title->React.string} </span>

From 9b0668f78a3655fd4337ea66eebdfe58df5367cb Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Fri, 15 Dec 2023 13:09:53 +0530
Subject: [PATCH 3/5] refactor: key in breadcrumb

---
 src/genericUtils/BreadCrumbNavigation.res | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/genericUtils/BreadCrumbNavigation.res b/src/genericUtils/BreadCrumbNavigation.res
index f1d05a33e..9ddc3ad0f 100644
--- a/src/genericUtils/BreadCrumbNavigation.res
+++ b/src/genericUtils/BreadCrumbNavigation.res
@@ -57,10 +57,8 @@ let make = (
             },
           })
       }
-      <UIUtils.RenderIf condition=showCrumb>
-        <div
-          key={Belt.Int.toString(index)}
-          className={`flex ${flexDirection} ${childGapClass} items-center`}>
+      <UIUtils.RenderIf key={Belt.Int.toString(index)} condition=showCrumb>
+        <div className={`flex ${flexDirection} ${childGapClass} items-center`}>
           {if collapse {
             <div
               className="flex flex-row gap-1 text-jp-2-gray-100 font-medium items-center justify-center">

From e2cbc398e7182677af2fad42c71139848e82abde Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Fri, 15 Dec 2023 14:07:40 +0530
Subject: [PATCH 4/5] refactor: key changes

---
 src/components/CustomExpandableTable.res      |  5 +++--
 src/components/DynamicSingleStat.res          | 19 +++++++++----------
 src/components/SelectBox.res                  |  7 +++++--
 src/components/Table.res                      |  3 ++-
 src/components/tooltip/ToolTip.res            |  4 ++--
 .../RoutingRevamp/AdvancedRouting.res         |  1 +
 .../HyperSwitch/Settings/BusinessDetails.res  |  4 +++-
 7 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/CustomExpandableTable.res b/src/components/CustomExpandableTable.res
index 5f8a0453c..b2287f40c 100644
--- a/src/components/CustomExpandableTable.res
+++ b/src/components/CustomExpandableTable.res
@@ -107,8 +107,9 @@ let make = (
                 let fontWeight = "font-bold"
                 let fontSize = "text-sm"
                 let paddingClass = "px-4 py-3"
-                <AddDataAttributes attributes=[("data-table-heading", item.title)]>
-                  <th key={string_of_int(i)} className="p-0">
+                <AddDataAttributes
+                  attributes=[("data-table-heading", item.title)] key={i->string_of_int}>
+                  <th className="p-0">
                     <div
                       className={`flex flex-row ${borderClass} justify-between items-center ${paddingClass} ${bgColor} ${headerTextClass} whitespace-pre ${roundedClass}`}>
                       <div className={`${fontWeight} ${fontSize}`}>
diff --git a/src/components/DynamicSingleStat.res b/src/components/DynamicSingleStat.res
index 9965eaef5..53ccbe53d 100644
--- a/src/components/DynamicSingleStat.res
+++ b/src/components/DynamicSingleStat.res
@@ -466,6 +466,7 @@ let make = (
               )
 
               <HSwitchSingleStatWidget
+                key={singleStatArrIndex->string_of_int}
                 title=info.title
                 tooltipText=info.tooltipText
                 deltaTooltipComponent={info.deltaTooltipComponent(info.statType)}
@@ -485,6 +486,7 @@ let make = (
 
           | None =>
             <HSwitchSingleStatWidget
+              key={singleStatArrIndex->string_of_int}
               title=""
               tooltipText=""
               deltaTooltipComponent=React.null
@@ -520,16 +522,15 @@ let make = (
       }
     })
 
-    <AddDataAttributes attributes=[("data-dynamic-single-stats", "dynamic stats")]>
-      <div key={index->Belt.Int.toString}>
-        {if sectionName === "" {
-          React.null
-        } else {
+    <AddDataAttributes
+      attributes=[("data-dynamic-single-stats", "dynamic stats")] key={index->string_of_int}>
+      <div>
+        <UIUtils.RenderIf condition={sectionName !== ""}>
           <div
             className="mb-5 block pl-5 pt-5 not-italic font-bold text-fs-18 text-black dark:text-white">
             {sectionName->React.string}
           </div>
-        }}
+        </UIUtils.RenderIf>
         {switch urlConfig.sectionInfo {
         | Some(info) =>
           <div
@@ -549,11 +550,9 @@ let make = (
               <div className="flex flex-wrap w-full">
                 {singleStateArr
                 ->Array.mapWithIndex((element, index) => {
-                  if index < 4 || showStats {
+                  <UIUtils.RenderIf condition={index < 4 || showStats} key={index->string_of_int}>
                     <div className="w-full md:w-1/2"> element </div>
-                  } else {
-                    React.null
-                  }
+                  </UIUtils.RenderIf>
                 })
                 ->React.array}
               </div>
diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res
index 6e36e5bcd..5d93c86b4 100644
--- a/src/components/SelectBox.res
+++ b/src/components/SelectBox.res
@@ -252,7 +252,8 @@ module ListItem = {
                         Js.String2.toLowerCase("_" ++ searchString)) &&
                       Js.String2.length(searchString) > 0
                   ) {
-                    <AddDataAttributes attributes=[("data-searched-text", item)]>
+                    <AddDataAttributes
+                      key={i->string_of_int} attributes=[("data-searched-text", item)]>
                       <mark
                         key={i->string_of_int} className={`${searchMatchTextColor} bg-transparent`}>
                         {item->React.string}
@@ -268,7 +269,8 @@ module ListItem = {
                     }
 
                     let selectOptions =
-                      <AddDataAttributes attributes=[("data-text", labelText)]>
+                      <AddDataAttributes
+                        attributes=[("data-text", labelText)] key={i->string_of_int}>
                         <span key={i->string_of_int} className=textClass value=labelText>
                           {item->React.string}
                         </span>
@@ -277,6 +279,7 @@ module ListItem = {
                     {
                       if showToolTipOptions {
                         <ToolTip
+                          key={i->string_of_int}
                           description=item
                           toolTipFor=selectOptions
                           contentAlign=Default
diff --git a/src/components/Table.res b/src/components/Table.res
index 0c225c706..0305c456a 100644
--- a/src/components/Table.res
+++ b/src/components/Table.res
@@ -197,7 +197,8 @@ module TableRow = {
           }
           let location = `${title}_tr${(rowIndex + 1)->Belt.Int.toString}_td${(cellIndex + 1)
               ->Belt.Int.toString}`
-          <AddDataAttributes attributes=[("data-table-location", location)]>
+          <AddDataAttributes
+            key={cellIndex->string_of_int} attributes=[("data-table-location", location)]>
             <td
               key={string_of_int(cellIndex)}
               className={`${tableRowBorderClass} ${customColorCell}`}
diff --git a/src/components/tooltip/ToolTip.res b/src/components/tooltip/ToolTip.res
index 7ddda7430..c8a1d9262 100644
--- a/src/components/tooltip/ToolTip.res
+++ b/src/components/tooltip/ToolTip.res
@@ -276,8 +276,8 @@ module DescriptionSection = {
       {description
       ->Js.String2.split("\n")
       ->Js.Array2.filter(str => str !== "")
-      ->Js.Array2.map(item => {
-        <AddDataAttributes attributes=[("data-text", item)]>
+      ->Js.Array2.mapi((item, i) => {
+        <AddDataAttributes attributes=[("data-text", item)] key={i->string_of_int}>
           <div key={item} className="flex flex-col gap-1"> {React.string(item)} </div>
         </AddDataAttributes>
       })
diff --git a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
index 076b6c8cd..5bafd13d7 100644
--- a/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
+++ b/src/screens/HyperSwitch/RoutingRevamp/AdvancedRouting.res
@@ -281,6 +281,7 @@ For example: If card_type = credit && amount > 100, route 60% to Stripe and 40%
               let id = {`${rulesJsonPath}[${string_of_int(index)}]`}
 
               <Wrapper
+                key={index->string_of_int}
                 id
                 heading={`Rule ${string_of_int(index + 1)}`}
                 onClickAdd={_ => addRule(index, false)}
diff --git a/src/screens/HyperSwitch/Settings/BusinessDetails.res b/src/screens/HyperSwitch/Settings/BusinessDetails.res
index 04897eeed..359d36484 100644
--- a/src/screens/HyperSwitch/Settings/BusinessDetails.res
+++ b/src/screens/HyperSwitch/Settings/BusinessDetails.res
@@ -141,7 +141,9 @@ let make = () => {
           className="flex flex-col md:flex-row justify-between bg-white p-7 gap-8 rounded-sm border border-jp-gray-border_gray">
           <div className="w-full flex flex-col gap-5 md:gap-10">
             {renderingArray
-            ->Js.Array2.map(details => <DetailsSection details formState merchantInfo />)
+            ->Js.Array2.mapi((details, i) =>
+              <DetailsSection key={i->string_of_int} details formState merchantInfo />
+            )
             ->React.array}
           </div>
           {switch formState {

From e4440d07dbbd0b1199319152977ed6291475d1a4 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Fri, 15 Dec 2023 14:29:46 +0530
Subject: [PATCH 5/5] refactor:key warnings

---
 .../Connectors/ConnectorAccountDetailsHelper.res     |  4 ++--
 .../HyperSwitch/FraudAndRisk/FRMPaymentMethods.res   | 10 ++++++----
 src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res  | 12 ++++++------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
index d5684ede0..72040836b 100644
--- a/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
+++ b/src/screens/HyperSwitch/Connectors/ConnectorAccountDetailsHelper.res
@@ -105,10 +105,10 @@ module RenderConnectorInputFields = {
     let keys =
       details->Js.Dict.keys->Js.Array2.filter(ele => !Js.Array2.includes(keysToIgnore, ele))
     keys
-    ->Array.map(field => {
+    ->Array.mapWithIndex((field, i) => {
       let label = details->getString(field, "")
       let formName = isLabelNested ? `${name}.${field}` : name
-      <UIUtils.RenderIf condition={label->Js.String2.length > 0}>
+      <UIUtils.RenderIf condition={label->Js.String2.length > 0} key={i->string_of_int}>
         <div key={label}>
           <FormRenderer.FieldRenderer
             labelClass="font-semibold !text-hyperswitch_black"
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res b/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
index f3966caab..90774fbe3 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMPaymentMethods.res
@@ -212,11 +212,12 @@ module CheckBoxRenderer = {
         </div>
       </div>
       {frmConfigInfo.payment_methods
-      ->Js.Array2.map(paymentMethodInfo => {
-        <UIUtils.RenderIf condition={isOpen}>
+      ->Js.Array2.mapi((paymentMethodInfo, index) => {
+        <UIUtils.RenderIf condition={isOpen} key={index->string_of_int}>
           {paymentMethodInfo.payment_method_types
-          ->Js.Array2.map(paymentMethodTypeInfo => {
+          ->Js.Array2.mapi((paymentMethodTypeInfo, i) => {
             <Accordion
+              key={i->string_of_int}
               initialExpandedArray=[0]
               accordion={[
                 {
@@ -310,8 +311,9 @@ module PaymentMethodsRenderer = {
     <PageLoaderWrapper screenState={pageState}>
       <div className="flex flex-col gap-4">
         {frmConfigs
-        ->Js.Array2.map(configInfo => {
+        ->Js.Array2.mapi((configInfo, i) => {
           <CheckBoxRenderer
+            key={i->string_of_int}
             frmConfigInfo={configInfo}
             frmConfigs
             connectorPaymentMethods={connectorConfig->Js.Dict.get(configInfo.gateway)}
diff --git a/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res b/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res
index a967599f2..6beb375e6 100644
--- a/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res
+++ b/src/screens/HyperSwitch/FraudAndRisk/FRMSummary.res
@@ -25,18 +25,18 @@ module ConfigInfo = {
   @react.component
   let make = (~frmConfigs) => {
     frmConfigs
-    ->Js.Array2.map(config => {
-      <div className="grid grid-cols-2 md:w-1/2 ml-12 my-12">
+    ->Js.Array2.mapi((config, i) => {
+      <div className="grid grid-cols-2 md:w-1/2 ml-12 my-12" key={i->string_of_int}>
         <h4 className="text-lg font-semibold"> {config.gateway->snakeToTitle->React.string} </h4>
         <div>
           {config.payment_methods
-          ->Js.Array2.map(paymentMethod => {
-            <div>
+          ->Js.Array2.mapi((paymentMethod, ind) => {
+            <div key={ind->string_of_int}>
               {paymentMethod.payment_method_types
               ->Array.mapWithIndex(
-                (paymentMethodType, i) => {
+                (paymentMethodType, index) => {
                   <InfoField
-                    key={i->string_of_int}
+                    key={index->string_of_int}
                     label={paymentMethodType.payment_method_type}
                     flowTypeValue={paymentMethodType.flow}
                     actionTypeValue={paymentMethodType.action}