get data from url and set in state & change default value & handle delete value of states & handle list and filter category and expertise in doctors page & handle search onchange & filter list clinics on change state

components/clinics/head/SearchBar.js

@@ -5,7 +5,7 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
 import { useState } from "react";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
 
-function SearchBar({ selected, setSelected, state, handleSearch, changeSearch, search }) {
+function SearchBar({ selected, setSelected, state, handleSearch }) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -22,13 +22,13 @@ function SearchBar({ selected, setSelected, state, handleSearch, changeSearch, s
         setOpen={setOpen}
         selected={selected}
         setSelected={setSelected}
+        handleSearch={handleSearch}
       >
         <ButtonFilter setOpen={setOpen} selected={selected} />
       </ModalSearchCity>
       <TextField
-        value={search}
         variant="standard"
-        onChange={e => changeSearch(e.target.value)}
+        onChange={e => handleSearch(e.target.value)}
         InputProps={{
           disableUnderline: true,
         }}

components/clinics/index.js

@@ -10,7 +10,6 @@ import HeadPageList from "@/app/component/head";
 
 function ClinicsPage({ matchedCity, matchedState }) {
   const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState("");
   const [filteredClinics, setFilteredClinics] = useState(clinics)
 
   const [selected, setSelected] = useState({
@@ -24,10 +23,9 @@ function ClinicsPage({ matchedCity, matchedState }) {
     }, 2000);
   }, []);
 
-  const changeSearch = text => setSearch(text);
 
-  const handleSearch = () => {
-    const searchOnName = searchOnList(clinics, search, 'title')
+  const handleSearch = (value) => {
+    const searchOnName = searchOnList(clinics, value, 'title')
     const searchOnLocation = searchOnList(searchOnName, selected.city, 'city')
     setFilteredClinics(searchOnLocation);
   };
@@ -39,11 +37,9 @@ function ClinicsPage({ matchedCity, matchedState }) {
         detail="در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید"
       >
         <SearchBar
-          search={search}
           selected={selected}
           setSelected={setSelected}
           state={matchedState?.name}
-          changeSearch={changeSearch}
           handleSearch={handleSearch}
         />
       </HeadPageList>