From 98eb21110da2554f58c3e0091ce949739b9311f1 Mon Sep 17 00:00:00 2001
From: Kiran Ashok <stepinfwd@gmail.com>
Date: Wed, 10 May 2023 11:37:48 +0530
Subject: [PATCH] Fix :: Additional button is getting added in Button Group
 component by changing value in labels (#6038)

* fix :: label bug in button group

* code improvement

* fix :: key for map in btn group
---
 frontend/src/Editor/Components/ButtonGroup.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/Editor/Components/ButtonGroup.jsx b/frontend/src/Editor/Components/ButtonGroup.jsx
index e18ef6c603..5e10c42d34 100644
--- a/frontend/src/Editor/Components/ButtonGroup.jsx
+++ b/frontend/src/Editor/Components/ButtonGroup.jsx
@@ -34,20 +34,20 @@ export const ButtonGroup = function Button({
   };
 
   const [defaultActive, setDefaultActive] = useState(defaultSelected);
-  const [data, setData] = useState(
-    // eslint-disable-next-line no-unsafe-optional-chaining
-    values?.length <= labels?.length ? [...labels, ...values?.slice(labels?.length)] : labels
-  );
-  // data is used as state to show what to display , club of label+values / values
+  const [data, setData] = useState(values);
+
   useEffect(() => {
     setDefaultActive(defaultSelected);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(defaultSelected)]);
 
   useEffect(() => {
+    let dataset = values;
     if (labels?.length < values?.length) {
-      // eslint-disable-next-line no-unsafe-optional-chaining
-      setData([...labels, ...values?.slice(labels?.length)]);
+      labels.map((item, index) => {
+        dataset[index] = item;
+      });
+      setData(dataset);
     } else {
       setData(labels);
     }
@@ -95,7 +95,7 @@ export const ButtonGroup = function Button({
               color: defaultActive?.includes(values[index]) ? selectedTextColor : textColor,
               transition: 'all .1s ease',
             }}
-            key={item}
+            key={index}
             disabled={disabledState}
             className={'group-button overflow-hidden'}
             onClick={(event) => {