Merge pull request #49222 from gijoe0295/gijoe/49063

Fix: Unique `key` warning

Author: luacmartins

src/components/AddressSearch/index.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {ActivityIndicator, Keyboard, LogBox, View} from 'react-native';
 import type {LayoutChangeEvent} from 'react-native';
@@ -329,12 +329,12 @@ function AddressSearch(
         return predefinedPlaces?.filter((predefinedPlace) => isPlaceMatchForSearch(searchValue, predefinedPlace)) ?? [];
     }, [predefinedPlaces, searchValue]);
 
-    const listEmptyComponent = useCallback(
-        () => (!isTyping ? null : <Text style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}>{translate('common.noResultsFound')}</Text>),
+    const listEmptyComponent = useMemo(
+        () => (!isTyping ? undefined : <Text style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}>{translate('common.noResultsFound')}</Text>),
         [isTyping, styles, translate],
     );
 
-    const listLoader = useCallback(
+    const listLoader = useMemo(
         () => (
             <View style={[styles.pv4]}>
                 <ActivityIndicator
@@ -462,15 +462,14 @@ function AddressSearch(
                         }}
                         inbetweenCompo={
                             // We want to show the current location button even if there are no recent destinations
-                            predefinedPlaces?.length === 0 &&
-                            shouldShowCurrentLocationButton && (
+                            predefinedPlaces?.length === 0 && shouldShowCurrentLocationButton ? (
                                 <View style={[StyleUtils.getGoogleListViewStyle(true), styles.overflowAuto, styles.borderLeft, styles.borderRight]}>
                                     <CurrentLocationButton
                                         onPress={getCurrentLocation}
                                         isDisabled={isOffline}
                                     />
                                 </View>
-                            )
+                            ) : undefined
                         }
                         placeholder=""
                         listViewDisplayed

src/components/MenuItemList.tsx

@@ -84,6 +84,7 @@ function MenuItemList({
         <>
             {menuItems.map((menuItemProps) => (
                 <OfflineWithFeedback
+                    key={menuItemProps.key ?? menuItemProps.title}
                     pendingAction={menuItemProps.pendingAction}
                     onClose={menuItemProps.onPendingActionDismiss}
                     errors={menuItemProps.error}

src/components/MoneyRequestConfirmationListFooter.tsx

@@ -300,7 +300,10 @@ function MoneyRequestConfirmationListFooter({
         },
         {
             item: (
-                <MentionReportContext.Provider value={mentionReportContextValue}>
+                <MentionReportContext.Provider
+                    key={translate('common.description')}
+                    value={mentionReportContextValue}
+                >
                     <MenuItemWithTopDescription
                         key={translate('common.description')}
                         shouldShowRightIcon={!isReadOnly}
@@ -504,7 +507,10 @@ function MoneyRequestConfirmationListFooter({
         },
         {
             item: (
-                <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8, styles.optionRow]}>
+                <View
+                    key={translate('common.billable')}
+                    style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8, styles.optionRow]}
+                >
                     <ToggleSettingOptionRow
                         switchAccessibilityLabel={translate('common.billable')}
                         title={translate('common.billable')}
@@ -521,8 +527,8 @@ function MoneyRequestConfirmationListFooter({
         },
     ];
 
-    const primaryFields: JSX.Element[] = [];
-    const supplementaryFields: JSX.Element[] = [];
+    const primaryFields: React.JSX.Element[] = [];
+    const supplementaryFields: React.JSX.Element[] = [];
 
     classifiedFields.forEach((field) => {
         if (field.shouldShow && !field.isSupplementary) {