Merge pull request #49405 from gijoe0295/gijoe/49064

fix: a props object containing `key` prop is spread into jsx
Expensify · Sep 19, 2024 · 8d18ce3 · 8d18ce3
2 parents 6b99d02 + 6b71989
commit 8d18ce3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/components/Form/InputWrapper.tsx b/src/components/Form/InputWrapper.tsx
@@ -76,10 +76,16 @@ function InputWrapper<TInput extends ValidInputs, TValue extends ValueTypeKey>(p
     const {registerInput} = useContext(FormContext);
 
     const {shouldSetTouchedOnBlurOnly, blurOnSubmit, shouldSubmitForm} = computeComponentSpecificRegistrationParams(props as InputComponentBaseProps);
+    const {key, ...registerInputProps} = registerInput(inputID, shouldSubmitForm, {ref, valueType, ...rest, shouldSetTouchedOnBlurOnly, blurOnSubmit});
 
-    // TODO: Sometimes we return too many props with register input, so we need to consider if it's better to make the returned type more general and disregard the issue, or we would like to omit the unused props somehow.
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <InputComponent {...registerInput(inputID, shouldSubmitForm, {ref, valueType, ...rest, shouldSetTouchedOnBlurOnly, blurOnSubmit})} />;
+    return (
+        <InputComponent
+            key={key}
+            // TODO: Sometimes we return too many props with register input, so we need to consider if it's better to make the returned type more general and disregard the issue, or we would like to omit the unused props somehow.
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...registerInputProps}
+        />
+    );
 }
 
 InputWrapper.displayName = 'InputWrapper';

diff --git a/src/components/MenuItemList.tsx b/src/components/MenuItemList.tsx
@@ -82,16 +82,16 @@ function MenuItemList({
 
     return (
         <>
-            {menuItems.map((menuItemProps) => (
+            {menuItems.map(({key, ...menuItemProps}) => (
                 <OfflineWithFeedback
-                    key={menuItemProps.key ?? menuItemProps.title}
+                    key={key ?? menuItemProps.title}
                     pendingAction={menuItemProps.pendingAction}
                     onClose={menuItemProps.onPendingActionDismiss}
                     errors={menuItemProps.error}
                     shouldForceOpacity={menuItemProps.shouldForceOpacity}
                 >
                     <MenuItem
-                        key={menuItemProps.key ?? menuItemProps.title}
+                        key={key ?? menuItemProps.title}
                         wrapperStyle={wrapperStyle}
                         onSecondaryInteraction={menuItemProps.link !== undefined ? (e) => secondaryInteraction(menuItemProps.link, e) : undefined}
                         ref={popoverAnchor}