filter

src/components/SelectBox.jsx

@@ -0,0 +1,53 @@
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import {useEffect, useState} from "react";
+const names = [
+    'Oliver Hansen',
+    'Van Henry',
+    'April Tucker',
+    'Ralph Hubbard',
+    'Omar Alexander',
+    'Carlos Abbott',
+    'Miriam Wagner',
+    'Bradley Wilkerson',
+    'Virginia Andrews',
+    'Kelly Snyder',
+];
+const SelectBox = ({ formik, id, defaultValue }) => {
+
+    useEffect(() => {
+        formik.setFieldValue(id, defaultValue || '');
+    }, []);
+
+    const [selectedValue, setSelectedValue] = useState(defaultValue || '');
+
+    const handleChange = (event) => {
+        const { value } = event.target;
+        setSelectedValue(value);
+        formik.setFieldValue(id, value);
+    };
+
+    return (
+        <>
+            <FormControl sx={{ mt: 3 }}>
+                <InputLabel>انتخاب</InputLabel>
+                <Select
+                    id={id}
+                    value={selectedValue}
+                    onChange={handleChange}
+                    label="انتخاب"
+                >
+                    {names.map((name) => (
+                        <MenuItem key={name} value={name}>
+                            {name}
+                        </MenuItem>
+                    ))}
+                </Select>
+            </FormControl>
+        </>
+    );
+};
+
+export default SelectBox;