From 15c979f6bfecf0ec9d42e08705515c26f7cc47e9 Mon Sep 17 00:00:00 2001
From: adnen rebai <adnen.rebai@gmail.com>
Date: Sat, 23 Sep 2023 19:37:45 +0200
Subject: [PATCH] fix render issue : arrow function inside the render function
 is anti-pattern

---
 src/Tab 01/Tabs.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Tab 01/Tabs.tsx b/src/Tab 01/Tabs.tsx
index 871a818..82edadb 100644
--- a/src/Tab 01/Tabs.tsx	
+++ b/src/Tab 01/Tabs.tsx	
@@ -10,13 +10,15 @@ const tabs = [
 
 export const Tabs = () => {
   const [activeTab, setActiveTab] = useState<number>(tabs[0].id);
-
+  const handleActiveTab = (tabId : number) => (e : React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    setActiveTab(tabId)}
   return (
     <div className="flex gap-20">
       {tabs.map((tab) => (
         <button
           key={tab.id}
-          onClick={() => setActiveTab(tab.id)}
+          onClick={handleActiveTab(tab.id)}
           className={`${
             activeTab === tab.id ? "" : "hover:text-white/60"
           } text-2xl font-medium px-4 py-1.5 relative`}