From 592dc56b262f3cb85098d6a30cb9da7015f125b4 Mon Sep 17 00:00:00 2001
From: VickyStash <vikstash@gmail.com>
Date: Sun, 13 Oct 2024 14:41:40 +0200
Subject: [PATCH] Add keys to get rid of lint errors

---
 src/components/AccountSwitcher.tsx             | 14 +++++++++++++-
 .../TextWithTooltip/index.native.tsx           | 14 +++++++++++++-
 .../index.native.tsx                           | 14 ++++++++++++--
 .../index.native.tsx                           | 14 +++++++++++++-
 .../index.tsx                                  | 16 +++++++++++++++-
 .../TextWithEmojiFragment/index.native.tsx     |  7 +++++--
 .../comment/TextWithEmojiFragment/index.tsx    | 18 +++++++++++++++++-
 7 files changed, 88 insertions(+), 9 deletions(-)

diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx
index 207f77b7ee24..12932c58bbc3 100644
--- a/src/components/AccountSwitcher.tsx
+++ b/src/components/AccountSwitcher.tsx
@@ -153,7 +153,19 @@ function AccountSwitcher() {
                                 style={[styles.textBold, styles.textLarge, styles.flexShrink1]}
                             >
                                 {processedTextArray.length !== 0
-                                    ? processedTextArray.map(({text, isEmoji}) => (isEmoji ? <Text style={styles.initialSettingsUsernameEmoji}>{text}</Text> : text))
+                                    ? processedTextArray.map(({text, isEmoji}, index) =>
+                                          isEmoji ? (
+                                              <Text
+                                                  // eslint-disable-next-line react/no-array-index-key
+                                                  key={index}
+                                                  style={styles.initialSettingsUsernameEmoji}
+                                              >
+                                                  {text}
+                                              </Text>
+                                          ) : (
+                                              text
+                                          ),
+                                      )
                                     : currentUserPersonalDetails?.displayName}
                             </Text>
                             {canSwitchAccounts && (
diff --git a/src/components/TextWithTooltip/index.native.tsx b/src/components/TextWithTooltip/index.native.tsx
index 892b34649d93..7084156ec7de 100644
--- a/src/components/TextWithTooltip/index.native.tsx
+++ b/src/components/TextWithTooltip/index.native.tsx
@@ -14,7 +14,19 @@ function TextWithTooltip({text, style, numberOfLines = 1}: TextWithTooltipProps)
             numberOfLines={numberOfLines}
         >
             {processedTextArray.length !== 0
-                ? processedTextArray.map(({text: textItem, isEmoji}) => (isEmoji ? <Text style={[style, styles.emojisFontFamily]}>{textItem}</Text> : textItem))
+                ? processedTextArray.map(({text: textItem, isEmoji}, index) =>
+                      isEmoji ? (
+                          <Text
+                              // eslint-disable-next-line react/no-array-index-key
+                              key={index}
+                              style={[style, styles.emojisFontFamily]}
+                          >
+                              {textItem}
+                          </Text>
+                      ) : (
+                          textItem
+                      ),
+                  )
                 : text}
         </Text>
     );
diff --git a/src/components/WorkspacesListRowDisplayName/index.native.tsx b/src/components/WorkspacesListRowDisplayName/index.native.tsx
index e9db04c18aae..a5d017cc69a7 100644
--- a/src/components/WorkspacesListRowDisplayName/index.native.tsx
+++ b/src/components/WorkspacesListRowDisplayName/index.native.tsx
@@ -14,8 +14,18 @@ function WorkspacesListRowDisplayName({isDeleted, ownerName}: WorkspacesListRowD
             style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
         >
             {processedOwnerName.length !== 0
-                ? processedOwnerName.map(({text, isEmoji}) =>
-                      isEmoji ? <Text style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}, styles.emojisWithTextFontFamily]}>{text}</Text> : text,
+                ? processedOwnerName.map(({text, isEmoji}, index) =>
+                      isEmoji ? (
+                          <Text
+                              // eslint-disable-next-line react/no-array-index-key
+                              key={index}
+                              style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}, styles.emojisWithTextFontFamily]}
+                          >
+                              {text}
+                          </Text>
+                      ) : (
+                          text
+                      ),
                   )
                 : ownerName}
         </Text>
diff --git a/src/pages/home/report/ReportActionItemMessageHeaderSender/index.native.tsx b/src/pages/home/report/ReportActionItemMessageHeaderSender/index.native.tsx
index f4fa8285eb42..849174f6c9a0 100644
--- a/src/pages/home/report/ReportActionItemMessageHeaderSender/index.native.tsx
+++ b/src/pages/home/report/ReportActionItemMessageHeaderSender/index.native.tsx
@@ -20,7 +20,19 @@ function ReportActionItemMessageHeaderSender({fragmentText, accountID, delegateA
                 style={[styles.chatItemMessageHeaderSender, isSingleLine ? styles.pre : styles.preWrap, styles.dFlex]}
             >
                 {processedTextArray.length !== 0
-                    ? processedTextArray.map(({text, isEmoji}) => (isEmoji ? <Text style={[styles.emojisWithTextFontSize, styles.emojisWithTextFontFamily]}>{text}</Text> : text))
+                    ? processedTextArray.map(({text, isEmoji}, index) =>
+                          isEmoji ? (
+                              <Text
+                                  // eslint-disable-next-line react/no-array-index-key
+                                  key={index}
+                                  style={[styles.emojisWithTextFontSize, styles.emojisWithTextFontFamily]}
+                              >
+                                  {text}
+                              </Text>
+                          ) : (
+                              text
+                          ),
+                      )
                     : fragmentText}
             </Text>
         </UserDetailsTooltip>
diff --git a/src/pages/home/report/ReportActionItemMessageHeaderSender/index.tsx b/src/pages/home/report/ReportActionItemMessageHeaderSender/index.tsx
index d2bedbd3f18b..869c550647ee 100644
--- a/src/pages/home/report/ReportActionItemMessageHeaderSender/index.tsx
+++ b/src/pages/home/report/ReportActionItemMessageHeaderSender/index.tsx
@@ -19,7 +19,21 @@ function ReportActionItemMessageHeaderSender({fragmentText, accountID, delegateA
                 numberOfLines={isSingleLine ? 1 : undefined}
                 style={[styles.chatItemMessageHeaderSender, isSingleLine ? styles.pre : styles.preWrap]}
             >
-                {processedTextArray.length !== 0 ? processedTextArray.map(({text, isEmoji}) => (isEmoji ? <Text style={styles.emojisWithTextFontSize}>{text}</Text> : text)) : fragmentText}
+                {processedTextArray.length !== 0
+                    ? processedTextArray.map(({text, isEmoji}, index) =>
+                          isEmoji ? (
+                              <Text
+                                  // eslint-disable-next-line react/no-array-index-key
+                                  key={index}
+                                  style={styles.emojisWithTextFontSize}
+                              >
+                                  {text}
+                              </Text>
+                          ) : (
+                              text
+                          ),
+                      )
+                    : fragmentText}
             </Text>
         </UserDetailsTooltip>
     );
diff --git a/src/pages/home/report/comment/TextWithEmojiFragment/index.native.tsx b/src/pages/home/report/comment/TextWithEmojiFragment/index.native.tsx
index f4efeefc6623..538ca4e9deb6 100644
--- a/src/pages/home/report/comment/TextWithEmojiFragment/index.native.tsx
+++ b/src/pages/home/report/comment/TextWithEmojiFragment/index.native.tsx
@@ -12,9 +12,12 @@ function TextWithEmojiFragment({message = '', style}: TextWithEmojiFragmentProps
 
     return (
         <Text style={style}>
-            {processedTextArray.map(({text, isEmoji}) =>
+            {processedTextArray.map(({text, isEmoji}, index) =>
                 isEmoji ? (
-                    <View>
+                    <View
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={index}
+                    >
                         <Text style={styles.emojisWithTextFontSizeAligned}>{text}</Text>
                     </View>
                 ) : (
diff --git a/src/pages/home/report/comment/TextWithEmojiFragment/index.tsx b/src/pages/home/report/comment/TextWithEmojiFragment/index.tsx
index e21a53451f2b..d19725da766d 100644
--- a/src/pages/home/report/comment/TextWithEmojiFragment/index.tsx
+++ b/src/pages/home/report/comment/TextWithEmojiFragment/index.tsx
@@ -9,7 +9,23 @@ function TextWithEmojiFragment({message = '', style}: TextWithEmojiFragmentProps
     const styles = useThemeStyles();
     const processedTextArray = useMemo(() => EmojiUtils.splitTextWithEmojis(message), [message]);
 
-    return <Text style={style}>{processedTextArray.map(({text, isEmoji}) => (isEmoji ? <Text style={styles.emojisWithTextFontSize}>{text}</Text> : convertToLTR(text)))}</Text>;
+    return (
+        <Text style={style}>
+            {processedTextArray.map(({text, isEmoji}, index) =>
+                isEmoji ? (
+                    <Text
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={index}
+                        style={styles.emojisWithTextFontSize}
+                    >
+                        {text}
+                    </Text>
+                ) : (
+                    convertToLTR(text)
+                ),
+            )}
+        </Text>
+    );
 }
 
 TextWithEmojiFragment.displayName = 'TextWithEmojiFragment';