From e4658143fa6c0f6dabd528794348b5279055e192 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Tue, 19 Mar 2024 09:39:01 +0100
Subject: [PATCH] Fix:Adding Indexing to the Catalog Tabs

---
 src/components/catalog/CatalogView.tsx | 40 ++++++++++++++------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/catalog/CatalogView.tsx b/src/components/catalog/CatalogView.tsx
index 6201c33..63cf5af 100644
--- a/src/components/catalog/CatalogView.tsx
+++ b/src/components/catalog/CatalogView.tsx
@@ -72,24 +72,28 @@ export const CatalogView: FC<{}> = props =>
                 <NitroCardView uniqueKey="catalog" className="nitro-catalog" style={ GetConfiguration('catalog.headers') ? { width: 710 } : {} }>
                     <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView>
-                        { rootNode && (rootNode.children.length > 0) && rootNode.children.map(child =>
-                        {
-                            if(!child.isVisible) return null;
-
-                            return (
-                                <NitroCardTabsItemView key={ child.pageId } isActive={ child.isActive } onClick={ event =>
-                                {
-                                    if(searchResult) setSearchResult(null);
-
-                                    activateNode(child);
-                                } } >
-                                    <Flex gap={ GetConfiguration('catalog.tab.icons') ? 1 : 0 } alignItems="center">
-                                        { GetConfiguration('catalog.tab.icons') && <CatalogIconView icon={ child.iconId } /> }
-                                        { child.localization }
-                                    </Flex>
-                                </NitroCardTabsItemView>
-                            );
-                        }) }
+                        {rootNode &&
+                            rootNode.children.length > 0 &&
+                            rootNode.children.map((child, index) => {
+                                if (!child.isVisible) return null;
+                                // Generate a unique key using the index of the map function
+                                const uniqueKey = `${child.pageId}-${index}`;
+                                return (
+                                    <NitroCardTabsItemView
+                                        key={uniqueKey}
+                                        isActive={child.isActive}
+                                        onClick={(event) => {
+                                            if (searchResult) setSearchResult(null);
+                                            activateNode(child);
+                                        }}
+                                    >
+                                        <Flex gap={GetConfiguration('catalog.tab.icons') ? 1 : 0} alignItems="center">
+                                            {GetConfiguration('catalog.tab.icons') && <CatalogIconView icon={child.iconId} />}
+                                            {child.localization}
+                                        </Flex>
+                                    </NitroCardTabsItemView>
+                                );
+                            })}
                     </NitroCardTabsView>
                     <NitroCardContentView>
                         <Grid>