Product Description Tables Changing On Click

src/components/ProductDescription/index.js

@@ -1,32 +1,49 @@
+
 import React from "react";
+import { useState } from "react";
 
 const ProductDescription = ({
     navTitles,
     items,
     addToCart
 }) =>{
+    const [name, setName] = useState(navTitles[0].name);
+    const [type, setType] = useState([]);
     return(
         <>
             <div className="flex w-full rounded  bg-gray-200 justify-center mt-6 ">
                 <ul className="w-full flex justify-center">
                     {navTitles.map(item => <li key={`NavTitle_${item.id}`} 
                     className={`p-6 mx-4 cursor-pointer
-                     ${item.isActive ? 'border-0 border-b-4 border-solid border-blue-500' : null}`
+                     ${type[item.id] ? 'border-0 border-b-4 border-solid border-blue-500' : null}`
                      } 
-                     onClick={() => item.isActive ? null : item.isActive = !item.isActive }>
+                     onClick={() => { 
+                        // type[item.id] = type
+                        // type[item.id] = !type[item.id]
+                        setName(item.name)
+                        // setType(type)
+                        //  console.log(type)
+                        //  console.log(item.id)
+                        //  console.log(type[item.id])
+                             
+                     }}>
                          {item.title}</li>)}
                 </ul>
             </div>
             <div className="flex w-full ">
                 <div className="flex-1 ">
-                   {items.map(e => (
                     
+                   {items.map(e => ( 
+                       e.name == name ?
                             e.items.map(item => (
                                     <ul className="flex w-full flex-1 my-2 items-center">
-                                    <li className="py-4 px-8  min-w-md bg-gray-200 ml-4 text-blueC0" style={{minWidth: '300px'}}>{item.title}</li>
+                                        
+                                    {item.title ? 
+                                    <li className="py-4 px-8  min-w-md bg-gray-200 ml-4 text-blueC0" style={{minWidth: '300px'}}>{item.title}</li> : null}
                                     <li className="py-4 px-8  min-w-md bg-gray-200 ml-4 w-full">{item.description}</li>
                                     </ul>  
-                                ))
+                                    
+                                )) : null
                             
                         
                    ))} 
@@ -60,7 +77,8 @@ ProductDescription.defaultProps = {
         {
             id: 1,
             title: 'نقد و بررسی',
-            isActive: false
+            isActive: false,
+            name: 'review'
         },
         {
             id: 2,
@@ -105,6 +123,12 @@ ProductDescription.defaultProps = {
                     description: '1399'
                 },
         ]
+        },
+        {
+            name: 'review',
+            items: [{
+                description: 'لورم ایبسوم'
+            }]
         }
     ]