From 3e346f3ac6754695fd8114a46088b535dfce4bdb Mon Sep 17 00:00:00 2001
From: DuckieTM <info@camwijs.nl>
Date: Sat, 16 Mar 2024 09:34:39 +0100
Subject: [PATCH] Fix Error in catalog (Encountered two children with the same
 key, `-1`.)

---
 src/components/catalog/CatalogView.tsx | 42 ++++++++++++++------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/catalog/CatalogView.tsx b/src/components/catalog/CatalogView.tsx
index 6201c33..463814b 100644
--- a/src/components/catalog/CatalogView.tsx
+++ b/src/components/catalog/CatalogView.tsx
@@ -71,25 +71,29 @@ export const CatalogView: FC<{}> = props =>
             { isVisible &&
                 <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>
-                            );
-                        }) }
+                    <NitroCardTabsView subClassName="w-100">
+                        {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>