Side Bar Filtering Works But Has Errors (Not Loading The Data)

src/components/Checkbox/index.js

@@ -17,7 +17,7 @@ export default function Checkbox(props) {
       </svg>
 
       <div className="checkbox-container">
-        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} />
+        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick}/>
         <label className="checkbox" htmlFor={"ch"+props.name}>
           <span>
             <svg width="12px" height="10px">

src/components/VerticalExpandableProductFilter/index.js

@@ -66,9 +66,11 @@ export default function VerticalExpandableProductFilter(props) {
                 <Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
                   checkedBox[i] = !checkedBox[i]
                   setChecked(checkedBox)
-                }}/>
+                  props.onChange(name , item1.name);
+                  
+                }} />
                 <strong className="text-xs font-light text-gray-500">
-                  {item1.name}
+                  {props.preName ? props.preName + ' ' + item1.name : item1.name}
                 </strong>
               </div>
 

src/views/Products/index.js

@@ -33,6 +33,10 @@ export const Products = ({
   const onChange = (name, value) => {
     setFilter({ ...filter, [name]: value });
   };
+  const onchange1 = (name, value) =>{
+    console.log(name)
+    console.log(value)
+  }
 
   useEffect(() => {
     getList();
@@ -158,7 +162,7 @@ export const Products = ({
             className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3`}
             // style={{ height: 1500 }}
           >
-            <Sidebar />
+            <Sidebar onChange={onChange}/>
             <Main />
           </div>
         )}

src/views/Products/layouts/Sidebar.js

@@ -3,12 +3,12 @@ import { connect } from "react-redux";
 import Checkbox from "../../../components/Checkbox";
 import VerticalExpandableProductFilter from "../../../components/VerticalExpandableProductFilter";
 
-export const Sidebar = ({}) => {
+export const Sidebar = ({onChange}) => {
 
   const filteronGrade = [
     {
       id:0,
-      name: "پایه اول",
+      name: "اول",
       expaneded: false,
       subList: [{
         id:1,
@@ -17,7 +17,7 @@ export const Sidebar = ({}) => {
     },
     {
       id:1,
-      name: "پایه دوم",
+      name: "دوم",
       expaneded: false,
       subList: [{
         id:1,
@@ -26,7 +26,7 @@ export const Sidebar = ({}) => {
     },
     {
       id:2,
-      name: "پایه سوم",
+      name: "سوم",
       expaneded: false,
       subList: [],
     },
@@ -59,7 +59,7 @@ export const Sidebar = ({}) => {
     },
   ]
   return <div className="flex flex-col w-1/4 p-4">
-          <VerticalExpandableProductFilter name="grades" btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
+          <VerticalExpandableProductFilter onChange={onChange} name="grade" preName='پایه' btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
           <VerticalExpandableProductFilter name="category"  list={categories} title="دسته بندی" searchAble={false}/>
           
   </div>;