Merge pull request #61776 from nabi-ebrahimi/fix/report-debug-console-errors

Fix React key and ref console errors in Report Debug Page

Author: tgolen

src/components/SidePanel/HelpModal/index.tsx

@@ -21,6 +21,7 @@ function Help({sidePanelTranslateX, closeSidePanel, shouldHideSidePanelBackdrop}
     const styles = useThemeStyles();
     const {isExtraLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const {paddingTop, paddingBottom} = useSafeAreaPaddings();
+
     const [isRHPVisible = false] = useOnyx(ONYXKEYS.MODAL, {selector: (modal) => modal?.type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED, canBeMissing: true});
     const uniqueModalId = useMemo(() => ComposerFocusManager.getId(), []);
 

src/pages/Debug/ConstantSelector.tsx

@@ -1,5 +1,7 @@
 import {useRoute} from '@react-navigation/native';
-import React, {useEffect} from 'react';
+import type {ForwardedRef} from 'react';
+import React, {forwardRef, useEffect} from 'react';
+import type {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Navigation from '@libs/Navigation/Navigation';
@@ -29,7 +31,12 @@ type ConstantSelectorProps = {
     policyID?: string;
 };
 
-function ConstantSelector({formType, policyID, errorText = '', name, value, onInputChange}: ConstantSelectorProps) {
+function ConstantSelector(
+    {formType, policyID, errorText = '', name, value, onInputChange}: ConstantSelectorProps,
+    // The ref is required by React.forwardRef to avoid warnings, even though it's not used yet.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref: ForwardedRef<View>,
+) {
     const fieldValue = (useRoute().params as Record<string, string> | undefined)?.[name];
 
     useEffect(() => {
@@ -64,4 +71,4 @@ function ConstantSelector({formType, policyID, errorText = '', name, value, onIn
 
 ConstantSelector.displayName = 'ConstantSelector';
 
-export default ConstantSelector;
+export default forwardRef(ConstantSelector);

src/pages/Debug/DateTimeSelector.tsx

@@ -1,5 +1,7 @@
 import {useRoute} from '@react-navigation/native';
-import React, {useEffect} from 'react';
+import type {ForwardedRef} from 'react';
+import React, {forwardRef, useEffect} from 'react';
+import type {View} from 'react-native';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
@@ -23,7 +25,12 @@ type DateTimeSelectorProps = {
     inputID: string;
 };
 
-function DateTimeSelector({errorText = '', name, value, onInputChange}: DateTimeSelectorProps) {
+function DateTimeSelector(
+    {errorText = '', name, value, onInputChange}: DateTimeSelectorProps,
+    // The ref is required by React.forwardRef to avoid warnings, even though it's not used yet.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref: ForwardedRef<View>,
+) {
     const fieldValue = (useRoute().params as Record<string, string> | undefined)?.[name];
 
     useEffect(() => {
@@ -58,4 +65,4 @@ function DateTimeSelector({errorText = '', name, value, onInputChange}: DateTime
 
 DateTimeSelector.displayName = 'DateTimeSelector';
 
-export default DateTimeSelector;
+export default forwardRef(DateTimeSelector);

src/pages/Debug/DebugDetails.tsx

@@ -55,7 +55,7 @@ type DebugDetailsProps = {
 function DebugDetails({formType, data, policyHasEnabledTags, policyID, children, onSave, onDelete, validate}: DebugDetailsProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const [formDraftData] = useOnyx(ONYXKEYS.FORMS.DEBUG_DETAILS_FORM_DRAFT);
+    const [formDraftData] = useOnyx(ONYXKEYS.FORMS.DEBUG_DETAILS_FORM_DRAFT, {canBeMissing: true});
     const booleanFields = useMemo(
         () =>
             Object.entries(data ?? {})
@@ -167,6 +167,7 @@ function DebugDetails({formType, data, policyHasEnabledTags, policyID, children,
                         const numberOfLines = DebugUtils.getNumberOfLinesFromString((formDraftData?.[key as keyof typeof formDraftData] as string) ?? value);
                         return (
                             <InputWrapper
+                                key={key}
                                 InputComponent={TextInput}
                                 inputID={key}
                                 accessibilityLabel={key}
@@ -187,6 +188,7 @@ function DebugDetails({formType, data, policyHasEnabledTags, policyID, children,
                 <View style={[styles.mb5, styles.ph5, styles.gap5]}>
                     {numberFields.map(([key, value]) => (
                         <InputWrapper
+                            key={key}
                             InputComponent={TextInput}
                             inputID={key}
                             accessibilityLabel={key}
@@ -234,6 +236,7 @@ function DebugDetails({formType, data, policyHasEnabledTags, policyID, children,
                 <View style={[styles.mb5, styles.ph5, styles.gap5]}>
                     {booleanFields.map(([key, value]) => (
                         <InputWrapper
+                            key={key}
                             InputComponent={CheckboxWithLabel}
                             label={key}
                             inputID={key}

src/pages/Debug/Report/DebugReportPage.tsx

@@ -131,7 +131,10 @@ function DebugReportPage({
             >
                 <View style={[styles.mb5, styles.ph5, styles.gap5]}>
                     {metadata?.map(({title, subtitle, message, action}) => (
-                        <View style={[StyleUtils.getBackgroundColorStyle(theme.cardBG), styles.p5, styles.br4, styles.flexColumn, styles.gap2]}>
+                        <View
+                            key={title}
+                            style={[StyleUtils.getBackgroundColorStyle(theme.cardBG), styles.p5, styles.br4, styles.flexColumn, styles.gap2]}
+                        >
                             <View style={[styles.flexRow, styles.justifyContentBetween]}>
                                 <Text style={styles.h4}>{title}</Text>
                                 <Text>{subtitle}</Text>