implemented category drop down list and filtering

2023-02-05 15:08:55 +01:00
parent 6f29a1f7e0
commit 6f8adf5aeb
3 changed files with 25 additions and 23 deletions
@@ -2,15 +2,15 @@ import React, { useState } from "react";
 import useToggle from "../../../hooks/useToggle";

 function SelectBox({ datas = [], className, action, contentBodyClasses }) {
-  const [item, setItem] = useState(datas[0]);
+  const [item, setItem] = useState('All category');
  // custom hook
  const [toggle, setToggle] = useToggle(false);
-  const handler = (e, value) => {
+  const handler = (e, code, category) => {
    e.preventDefault();
    if (action) {
-      action(value);
+      action(code);
    }
-    setItem(value);
+    setItem(category);
    setToggle.set(false);
  };
  return (
@@ -54,13 +54,13 @@ function SelectBox({ datas = [], className, action, contentBodyClasses }) {
            } ${contentBodyClasses || ""}`}
          >
            <ul className="flex flex-col space-y-3">
-              {datas.map((value) => (
+              {datas.map((value, index) => (
                <li
-                  key={value}
-                  onClick={(e) => handler(e, value)}
+                  key={index}
+                  onClick={(e) => handler(e, value.code, value.category)}
                  className="text-thin-light-gray tracking-wide text-sm cursor-pointer"
                >
-                  {value}
+                  {value.category}
                </li>
              ))}
            </ul>