From 9ac163c9259361b2349c73c64c5fd74e6908353c Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 1 Oct 2024 12:20:47 +0200
Subject: [PATCH] Fix duplicate key in inspector background section (#6438)

**Problem:**

The inspector background section causes duplicate keys errors.

<img width="626" alt="image"
src="https://github.com/user-attachments/assets/2d560bc6-7c7b-4ed4-a0a7-e9d4a13a7ff6">

**Fix:**

Rename the keys for solid/gradient <> string background inputs so they
are unique.

Fixes #6437
---
 .../background-subsection/solid-background-layer.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/editor/src/components/inspector/sections/style-section/background-subsection/solid-background-layer.tsx b/editor/src/components/inspector/sections/style-section/background-subsection/solid-background-layer.tsx
index 2eb227918cdb..d5f9381117f5 100644
--- a/editor/src/components/inspector/sections/style-section/background-subsection/solid-background-layer.tsx
+++ b/editor/src/components/inspector/sections/style-section/background-subsection/solid-background-layer.tsx
@@ -117,9 +117,9 @@ export const SolidBackgroundLayer = React.memo<SolidBackgroundLayerProps>((props
           onMouseDown={stopPropagation}
         />
         <BackgroundSolidOrGradientThumbnailControl
-          id={`background-layer-gradient-${props.index}`}
-          key={`background-layer-gradient-${props.index}`}
-          testId={`background-layer-gradient-${props.index}`}
+          id={`background-layer-solid-or-gradient-${props.index}`}
+          key={`background-layer-solid-or-gradient-${props.index}`}
+          testId={`background-layer-solid-or-gradient-${props.index}`}
           value={props.value}
           backgroundIndex={props.index}
           useSubmitValueFactory={props.useSubmitTransformedValuesFactory}
@@ -132,9 +132,9 @@ export const SolidBackgroundLayer = React.memo<SolidBackgroundLayerProps>((props
           setOpenPopup={props.setOpenPopup}
         />
         <StringBackgroundColorControl
-          id={`background-layer-gradient-${props.index}`}
-          key={`background-layer-gradient-${props.index}`}
-          testId={`background-layer-gradient-${props.index}`}
+          id={`background-layer-string-${props.index}`}
+          key={`background-layer-string-${props.index}`}
+          testId={`background-layer-string-${props.index}`}
           value={props.value}
           backgroundIndex={props.index}
           useSubmitValueFactory={props.useSubmitTransformedValuesFactory}