From b749d50708b60678772ab09a897e880a269293d6 Mon Sep 17 00:00:00 2001
From: lehuygiang28 <lehuygiang28@gmail.com>
Date: Wed, 3 Jul 2024 01:15:16 +0700
Subject: [PATCH] fix(fe): :bug: resolve uniq key props in list

---
 .../fe/src/components/themed-layout/index.tsx | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/apps/fe/src/components/themed-layout/index.tsx b/apps/fe/src/components/themed-layout/index.tsx
index f05d09b..f42ffe7 100644
--- a/apps/fe/src/components/themed-layout/index.tsx
+++ b/apps/fe/src/components/themed-layout/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { PropsWithChildren, useContext } from 'react';
+import { Fragment, PropsWithChildren, useContext } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Layout, Typography } from 'antd';
@@ -34,12 +34,12 @@ function CustomSider({ mode, user }: { mode: string; user: UserDto }) {
             render={({ items, logout, collapsed }) => {
                 return (
                     <>
-                        {items.map((item) => {
+                        {items.map((item, index) => {
                             if (item.key.includes('admin') && user?.role !== UserRoleEnum.Admin) {
-                                return <></>;
+                                return <Fragment key={`${item.key}_${index}`}></Fragment>;
                             }
 
-                            return item;
+                            return <Fragment key={`${item.key}_${index}`}>{item}</Fragment>;
                         })}
                         {logout}
                         {collapsed}
@@ -75,17 +75,8 @@ export function ThemedLayout({ children }: PropsWithChildren) {
     return (
         <ThemedLayoutV2
             Header={() => <Header user={user} sticky />}
-            Sider={() => (
-                <>
-                    <CustomSider mode={mode} user={user} />
-                </>
-            )}
-            dashboard
-            Footer={() => (
-                <>
-                    <CustomFooter mode={mode} />
-                </>
-            )}
+            Sider={() => <CustomSider mode={mode} user={user} />}
+            Footer={() => <CustomFooter mode={mode} />}
         >
             {children}
         </ThemedLayoutV2>