Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Unique key warning #49222

Merged
merged 8 commits into from
Sep 18, 2024
+17 −11
Merged

Fix: Unique key warning #49222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
205f47a
fix: unique key warning
gijoe0295 Sep 15, 2024
e17c3ce
Merge branch 'main' of https://github.com/gijoe0295/App into gijoe/49063
gijoe0295 Sep 17, 2024
3fcea03
fix: invalid prop inbetweenCompo of type boolean
gijoe0295 Sep 17, 2024
0eee5fa
fix: invalid prop listEmptyComponent and listLoaderComponent of type …
gijoe0295 Sep 17, 2024
5caf0b9
remove redundant changes
gijoe0295 Sep 17, 2024
e9ef0dc
fix lint: jsx deprecation
gijoe0295 Sep 17, 2024
cf48092
Merge branch 'main' of https://github.com/gijoe0295/App into gijoe/49063
gijoe0295 Sep 18, 2024
f2f205b
fix: unique key warning in MenuItemList
gijoe0295 Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions src/components/AddressSearch/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useCallback returns a function while useMemo returns the ReactElement itself.

Screenshot 2024-09-18 at 01 26 11

Same with listLoaderComponent.

[isTyping, styles, translate],
);

const listLoader = useCallback(
const listLoader = useMemo(
() => (
<View style={[styles.pv4]}>
<ActivityIndicator
Expand Down Expand Up @@ -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
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

predefinedPlaces?.length === 0 && shouldShowCurrentLocationButton can be false while inbetweenCompo expects a ReactNode.

Screenshot 2024-09-18 at 01 23 08

placeholder=""
listViewDisplayed
Expand Down
1 change: 1 addition & 0 deletions src/components/MenuItemList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ function MenuItemList({
<>
{menuItems.map((menuItemProps) => (
<OfflineWithFeedback
key={menuItemProps.key ?? menuItemProps.title}
pendingAction={menuItemProps.pendingAction}
onClose={menuItemProps.onPendingActionDismiss}
errors={menuItemProps.error}
Expand Down
14 changes: 10 additions & 4 deletions src/components/MoneyRequestConfirmationListFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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')}
Expand All @@ -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) {
Expand Down
Loading