fix: set key before spreading props

bigcommerce · Aug 1, 2024 · 23091c0 · 23091c0
1 parent 0de817c
commit 23091c0
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 21 deletions.
diff --git a/core/components/ui/pick-list/pick-list.tsx b/core/components/ui/pick-list/pick-list.tsx
@@ -33,17 +33,14 @@ const PickList = forwardRef<ElementRef<typeof RadioGroupPrimitive.Root>, Props>(
         {...props}
       >
         {items.map((item) => {
-          const {
-            className: itemClassName,
-            defaultImage,
-            label,
-            value,
-            onMouseEnter,
-            ...itemProps
-          } = item;
+          const { defaultImage, label, value, onMouseEnter, ...itemProps } = item;
 
           return (
-            <div className="flex items-center p-4" key={value} onMouseEnter={onMouseEnter}>
+            <div
+              className="flex items-center p-4"
+              key={`${id}-${value}`}
+              onMouseEnter={onMouseEnter}
+            >
               {Boolean(defaultImage) && (
                 <BcImage
                   alt={defaultImage?.altText || ''}
@@ -54,10 +51,10 @@ const PickList = forwardRef<ElementRef<typeof RadioGroupPrimitive.Root>, Props>(
                 />
               )}
               <RadioGroupPrimitive.Item
+                {...itemProps}
                 className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 border-gray-200 hover:border-secondary focus-visible:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20 focus-visible:hover:border-secondary disabled:pointer-events-none disabled:bg-gray-100 radix-state-checked:border-primary radix-state-checked:bg-primary radix-state-checked:hover:border-secondary radix-state-checked:hover:bg-secondary radix-state-checked:disabled:border-gray-400 radix-state-checked:disabled:bg-gray-400"
                 id={`${id}-${value}`}
                 value={value}
-                {...itemProps}
               >
                 <RadioGroupPrimitive.Indicator className="h-2 w-2 rounded-full bg-white" />
               </RadioGroupPrimitive.Item>

diff --git a/core/components/ui/radio-group/radio-group.tsx b/core/components/ui/radio-group/radio-group.tsx
@@ -20,11 +20,12 @@ const RadioGroup = ({ children, className, variant, items, ...props }: Props) =>
   return (
     <RadioGroupPrimitive.Root className={className} {...props}>
       {items.map((item) => {
-        const { className: itemClassName, label, value, ...itemProps } = item;
+        const { label, value, ...itemProps } = item;
 
         return (
           <div className="mb-2 flex w-full gap-4" key={`${id}-${value}`}>
             <RadioGroupPrimitive.Item
+              {...itemProps}
               className={cn(
                 'flex h-6 w-6 items-center justify-center rounded-full border-2 border-gray-200 hover:border-secondary focus-visible:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20 focus-visible:hover:border-secondary disabled:pointer-events-none disabled:bg-gray-100 radix-state-checked:border-primary radix-state-checked:bg-primary radix-state-checked:hover:border-secondary radix-state-checked:hover:bg-secondary radix-state-checked:disabled:border-gray-400 radix-state-checked:disabled:bg-gray-400',
                 variant === 'success' &&
@@ -34,7 +35,6 @@ const RadioGroup = ({ children, className, variant, items, ...props }: Props) =>
               )}
               id={`${id}-${value}`}
               value={value}
-              {...itemProps}
             >
               <RadioGroupPrimitive.Indicator className="h-2 w-2 rounded-full bg-white" />
             </RadioGroupPrimitive.Item>

diff --git a/core/components/ui/rectangle-list/rectangle-list.tsx b/core/components/ui/rectangle-list/rectangle-list.tsx
@@ -29,14 +29,14 @@ const RectangleList = forwardRef<ElementRef<typeof RadioGroupPrimitive.Root>, Pr
         {...props}
       >
         {items.map((item) => {
-          const { className: itemClassName, label, value, ...itemProps } = item;
+          const { label, value, ...itemProps } = item;
 
           return (
             <RadioGroupPrimitive.Item
-              className="border-2 px-6 py-2.5 font-semibold text-black hover:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20 disabled:border-gray-100 disabled:text-gray-400 disabled:hover:border-gray-100 data-[state=checked]:border-primary"
               key={`${id}-${value}`}
-              value={value}
               {...itemProps}
+              className="border-2 px-6 py-2.5 font-semibold text-black hover:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20 disabled:border-gray-100 disabled:text-gray-400 disabled:hover:border-gray-100 data-[state=checked]:border-primary"
+              value={value}
             >
               {item.label}
             </RadioGroupPrimitive.Item>

diff --git a/core/components/ui/select/select.tsx b/core/components/ui/select/select.tsx
@@ -60,16 +60,16 @@ const Select = forwardRef<ElementRef<typeof SelectPrimitive.Trigger>, Props>(
             </SelectPrimitive.ScrollUpButton>
             <SelectPrimitive.Viewport className="h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]">
               {options.map((option) => {
-                const { className: optionClassName, value, label, ...optionProps } = option;
+                const { value, label, ...optionProps } = option;
 
                 return (
                   <SelectPrimitive.Item
+                    key={`${id}-${value}`}
+                    {...optionProps}
                     className={
                       'relative flex w-full cursor-pointer select-none items-center justify-between overflow-visible px-4 py-2 outline-none hover:bg-secondary/10 hover:text-primary focus-visible:bg-secondary/10 data-[disabled]:pointer-events-none data-[state="checked"]:bg-secondary/10 data-[state="checked"]:text-primary data-[disabled]:opacity-50'
                     }
-                    key={`${id}-${value}`}
                     value={value}
-                    {...optionProps}
                   >
                     <SelectPrimitive.ItemText>{label}</SelectPrimitive.ItemText>
                     <SelectPrimitive.ItemIndicator>

diff --git a/core/components/ui/swatch/swatch.tsx b/core/components/ui/swatch/swatch.tsx
@@ -30,15 +30,15 @@ const Swatch = forwardRef<ElementRef<typeof RadioGroupPrimitive.Root>, Props>(
         {...props}
       >
         {items.map((item) => {
-          const { className: itemClassName, label, value, variantColor, ...itemProps } = item;
+          const { label, value, variantColor, ...itemProps } = item;
 
           return (
             <RadioGroupPrimitive.Item
-              className="group h-12 w-12 border-2 bg-white p-1 hover:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20 disabled:border-gray-100 disabled:hover:border-gray-100 data-[state=checked]:border-primary"
               key={`${id}-${value}`}
+              {...itemProps}
+              className="group h-12 w-12 border-2 bg-white p-1 hover:border-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20 disabled:border-gray-100 disabled:hover:border-gray-100 data-[state=checked]:border-primary"
               title={label}
               value={value}
-              {...itemProps}
             >
               {variantColor ? (
                 <span