feat(initial label for dropdown)

Zeddnyx · Jul 20, 2024 · e624d47 · e624d47
1 parent d57d4d6
commit e624d47
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/components/ui/form/Dropdown.tsx b/components/ui/form/Dropdown.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { IoIosArrowDown } from "react-icons/io";
 
 import styles from "@/styles/component/form.module.css";
@@ -12,6 +12,7 @@ export default function DropDown({
   labelSide = "top",
   placeholder = "Select",
   variant = "solid",
+  value,
   onChange,
   error,
   isRequired = false,
@@ -24,6 +25,13 @@ export default function DropDown({
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [getLabel, setGetLabel] = useState("");
 
+  useEffect(() => {
+    const initialOption = options?.find((option) => option.value === value);
+    if (initialOption) {
+      setGetLabel(initialOption.label);
+    }
+  }, [value, options]);
+
   const handleSelect = (value: string, label: string) => {
     onChange({ target: { name, value } });
     setGetLabel(label);

diff --git a/types/index.ts b/types/index.ts
@@ -32,6 +32,7 @@ declare interface IDropDown {
   label?: string;
   labelSide?: "left" | "top";
   placeholder?: string;
+  value?: string;
   onChange: any;
   isRequired?: boolean;
   isDisabled?: boolean;