Add keys to get rid of lint errors

Expensify · Oct 13, 2024 · 592dc56 · 592dc56
1 parent 8e703d2
commit 592dc56
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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';