Resolve React specific errors for key and nested links.

Author: skrustev

src/app/app-routes.tsx

@@ -1,5 +1,5 @@
 import { redirect, RouteObject } from 'react-router-dom';
-import ErpHGridView from './views/erp-hgrid/erp-hgrid-view';
+import ERPHGridView from './views/erp-hgrid/erp-hgrid-view';
 import HRPortalView from './views/hr-portal/hr-portal-view';
 import FinanceView from './views/finance/finance-view';
 import SalesView from './views/sales/sales-view';
@@ -11,14 +11,14 @@ export const routes: RouteObject[] = [
   { path: 'home', element: <HomeView />,
     children: [
       { index: true, loader: () => redirect('inventory') },
-      { path: 'inventory', element: <ErpHGridView /> },
+      { path: 'inventory', element: <ERPHGridView /> },
       { path: 'hr-portal', element: <HRPortalView /> },
       { path: 'finance', element: <FinanceView />},
       { path: 'sales', element: <SalesView /> },
       { path: 'fleet', element: <FleetManagementView /> },
     ]
   },
-  { path: 'inventory', element: <ErpHGridView /> },
+  { path: 'inventory', element: <ERPHGridView /> },
   { path: 'hr-portal', element: <HRPortalView /> },
   { path: 'finance', element: <FinanceView />},
   { path: 'sales', element: <SalesView /> },

src/app/views/home/home-view.scss

@@ -129,7 +129,14 @@
     }
   }
 
-  a {
+  .learn-text {
+    text-decoration: none;
+    color: var(--ig-primary-500);
+    font-size: 14px;
+    font-weight: 700;
+    font-family: "aktiv-grotesk", sans-serif;
+    line-height: 20px;
+
     width: unset;
     padding-bottom: 2px;
     transition: background-size 350ms;
@@ -154,15 +161,6 @@
   }
 }
 
-.learn-text {
-  text-decoration: none;
-  color: var(--ig-primary-500);
-  font-size: 14px;
-  font-weight: 700;
-  font-family: "aktiv-grotesk", sans-serif;
-  line-height: 20px;
-}
-
 .tooltip {
   position: relative;
   display: inline-block;

src/app/views/home/home-view.tsx

@@ -19,11 +19,12 @@ interface TabItemProps {
   tabInfo?: TabInfo,
 }
 
+/* eslint-disable */
+
 export function TabItem({isActive, tabInfo}: TabItemProps) {
 
   function onLinkClick(event: any) {
-    const targetHTML = event.currentTarget as HTMLAnchorElement;
-    window.open(targetHTML.href, "_blank")?.focus();
+    window.open(tabInfo?.moreLink, "_blank")?.focus();
     event.preventDefault();
     event.stopPropagation();
   }
@@ -46,7 +47,7 @@ export function TabItem({isActive, tabInfo}: TabItemProps) {
           <span>{tabInfo?.content}</span>
         </div>
         <div className="tab-actions">
-          <a className={"learn-text" + (!isActive ? " link--disabled" : "" )} href={tabInfo?.moreLink} onClick={onLinkClick}>Learn more</a>
+          <span className={"learn-text" + (!isActive ? " link--disabled" : "" )} onClick={onLinkClick}>Learn more</span>
           <div className="tooltip">
             <IgrIconButton className={"button" + (isActive ? "--enabled" : "--disabled")} onClick={onDownloadClick}>
                 <IgrRipple key='downloadRipple'></IgrRipple>
@@ -128,9 +129,9 @@ export default function HomeView() {
     <div className="demo-container">
       <div className="tab-container ">
         {['inventory', 'hr-portal', 'finance', 'sales', 'fleet'].map(tabName =>
-          <NavLink to={`/home/${tabName}`}>
+          <NavLink key={tabName} to={`/home/${tabName}`}>
             {({ isActive }) => (
-              <TabItem key={tabName} isActive={isActive} tabInfo={tabInfo.get(tabName)}/>
+              <TabItem  isActive={isActive} tabInfo={tabInfo.get(tabName)}/>
             )}
           </NavLink>
         )}