🆙 Fix the NitroSystemAlert -> A key prop is being spread into a JSX element

src/components/notification-center/NotificationCenterView.tsx

@@ -14,55 +14,28 @@ export const NotificationCenterView: FC<{}> = props =>
     {
         if(!alerts || !alerts.length) return null;
 
-        const elements: ReactNode[] = [];
+        return alerts.map((alert) => GetAlertLayout(alert, () => closeAlert(alert)));
-
-        for(const alert of alerts)
-        {
-            const element = GetAlertLayout(alert, () => closeAlert(alert));
-
-            elements.push(element);
-        }
-
-        return elements;
     }, [ alerts, closeAlert ]);
 
     const getBubbleAlerts = useMemo(() =>
     {
         if(!bubbleAlerts || !bubbleAlerts.length) return null;
 
-        const elements: ReactNode[] = [];
+        return bubbleAlerts.map((alert) => {
-
-        for(const alert of bubbleAlerts)
-        {
             const element = GetBubbleLayout(alert, () => closeBubbleAlert(alert));
-
             if(alert.notificationType === NotificationBubbleType.CLUBGIFT)
             {
-                elements.unshift(element);
+                return element;
-
-                continue;
             }
-
+            return element;
-            elements.push(element);
+        });
-        }
-
-        return elements;
     }, [ bubbleAlerts, closeBubbleAlert ]);
 
     const getConfirms = useMemo(() =>
     {
         if(!confirms || !confirms.length) return null;
 
-        const elements: ReactNode[] = [];
+        return confirms.map((confirm) => GetConfirmLayout(confirm, () => closeConfirm(confirm)));
-
-        for(const confirm of confirms)
-        {
-            const element = GetConfirmLayout(confirm, () => closeConfirm(confirm));
-
-            elements.push(element);
-        }
-
-        return elements;
     }, [ confirms, closeConfirm ]);
 
     return (
@@ -74,4 +47,4 @@ export const NotificationCenterView: FC<{}> = props =>
             { getAlerts }
         </>
     );
-}
+}

src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx

@@ -7,15 +7,16 @@ export const GetAlertLayout = (item: NotificationAlertItem, onClose: () => void)
 {
     if(!item) return null;
 
-    const props = { key: item.id, item, onClose };
+    const key = item.id;
+    const props = { item, onClose };
 
     switch(item.alertType)
     {
         case NotificationAlertType.NITRO:
-            return <NitroSystemAlertView { ...props } />
+            return <NitroSystemAlertView key={key} {...props} />;
         case NotificationAlertType.SEARCH:
-            return <NotificationSeachAlertView { ...props } />
+            return <NotificationSeachAlertView key={key} {...props} />;
         default:
-            return <NotificationDefaultAlertView { ...props } />
+            return <NotificationDefaultAlertView key={key} {...props} />;
     }
-}
+}

src/components/notification-center/views/alert-layouts/NitroSystemAlertView.tsx

@@ -38,7 +38,7 @@ export const NitroSystemAlertView: FC<NotificationDefaultAlertViewProps> = props
 						<Text>- DuckieTM (Re-Design)</Text>
 						<Text>- Jonas (Contributing)</Text>
 						<Text>- Ohlucas (Sunset resources)</Text>
-						<Text center bold small>v1.2.0</Text>
+						<Text center bold small>v1.5.0</Text>
 						<Button fullWidth onClick={ event => window.open('https://git.krews.org/nitro/nitro-react') }>Cool UI Git</Button>
                     </Column>
                 </Column>