refactor: Refactoring key errors

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}`}>

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>

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

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}`}

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>
       })

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"

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)}

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}

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)}

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 {