I need to select a province in the select to return the clinics that are located in that province, but when I select a province I get this error TypeError: termSearch.toLowerCase is not a function. I am a little lost in this part of the code, any help is appreciated.//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

import React, { useState, useEffect } from 'react'
import Select, { SingleValue } from 'react-select'
import { getClinic } from '../../api/drupalAPI'
import {Clinic} from '@icofcv/common';


export const SearchFilterClinics = () => {

         ////filter

         type OptionType = {
            value: string;
            label: string;
          };
    
          
            const provincesList: OptionType[] = [
                { value: 'Todos', label: 'Todos' },
                { value: 'Alava/Araba', label: 'Alava/Araba' },
                { value: 'Albacete', label: 'Albacete' },
                { value: 'Alicante', label: 'Alicante' },
                { value: 'Almería', label: 'Almería' },
                { value: 'Avila', label: 'Avila' },
                { value: ' Badajoz', label: ' Badajoz' },
                { value: 'Islas Baleares', label: 'Islas Baleares' },
                { value: 'Barcelona', label: 'Barcelona' },
                { value: 'Burgos', label: 'Burgos' },
                { value: 'Cáceres', label: 'Cáceres' },
                { value: 'Cádiz', label: 'Cádiz' },
                { value: 'Castellón', label: 'Castellón' },
                { value: 'Ciudad Real', label: 'Ciudad Real' },
                { value: 'Córdoba', label: 'Córdoba' },
                { value: 'A Coruña/La Coruña', label: 'A Coruña/La Coruña' },
                { value: 'Cuenca', label: 'Cuenca' },
                { value: 'Gerona/Girona', label: 'Gerona/Girona' },
                { value: 'Granada', label: 'Granada' },
                { value: 'Guadalajara', label: 'Guadalajara' },
                { value: 'Gipuzkoa/Guipuzcoa', label: 'Gipuzkoa/Guipuzcoa' },
                { value: 'Huelva', label: 'Huelva' },
                { value: 'Huesca', label: 'Huesca' },
                { value: 'Jaen', label: 'Jaen' },
                { value: 'León', label: 'León' },
                { value: 'Lérida/Lleida', label: 'Lérida/Lleida' },
                { value: 'La Rioja', label: 'La Rioja' },
                { value: 'Lugo', label: 'Lugo' },
                { value: 'Madrid', label: 'Madrid' },
                { value: ' Málaga', label: ' Málaga' },
                { value: 'Murcia', label: 'Murcia' },
                { value: 'Navarra', label: 'Navarra' },
                { value: 'Orense/Ourense', label: 'Orense/Ourense' },
                { value: 'Asturias', label: 'Asturias' },
                { value: 'Palencia', label: 'Palencia' },
                { value: 'Las Palmas', label: 'Las Palmas' },
                { value: 'Pontevedra', label: 'Pontevedra' },
                { value: 'Salamanca', label: 'Salamanca' },
                { value: 'S.C.Tenerife', label: 'S.C.Tenerife' },
                { value: 'Cantabria', label: 'Cantabria' },
                { value: 'Segovia', label: 'Segovia' },
                { value: ' Sevilla', label: ' Sevilla' },
                { value: 'Soria', label: 'Soria' },
                { value: 'Tarragona', label: 'Tarragona' },
                { value: 'Teruel', label: 'Teruel' },
                { value: 'Toledo', label: 'Toledo' },
                { value: 'Valencia', label: 'Valencia' },
                { value: 'Valladolid', label: 'Valladolid' },
                { value: 'Bizkaia/Vizcaya', label: 'Bizkaia/Vizcaya' },
                { value: 'Zamora', label: 'Zamora' },
                { value: 'Zaragoza', label: 'Zaragoza' },
                { value: 'Ceuta', label: 'Ceuta' },
                { value: 'Melilla', label: 'Melilla' },
               
            ]

    const [clinicList, setClinicList] = useState<Clinic[]>([]);
    const [clinicListFilteredSelect, setClinicListFilteredSelect] = useState<Clinic[]>([]);
    const [filterSelectClinic, setFilterSelectClinic] = useState<SingleValue<OptionType>>(provincesList[0]);
    
    
    const fetchClinicList = async () => {
        getClinic().then((response)=>{
            console.log(response)
            setClinicList(response);
            setClinicListFilteredSelect(response)
        }).catch ( (error)  => {
            console.error(error);
            throw error;
        });
    }
                                         
                                   

      const handleChangeSelect = (provinceList: SingleValue<OptionType>) =>{
         console.log(provinceList)
         setFilterSelectClinic(provinceList);
         filterSelect(provinceList );
      }

       
      const filterSelect=(termSearch)=>{
        const resultFilterSelect = clinicList.filter((element) => {
          if(element.province?.toString().toLowerCase().includes(termSearch.toLowerCase() )
        
          ){
            return element;
          }
        });
        setClinicListFilteredSelect(resultFilterSelect);
      }

      useEffect (() => {
        fetchClinicList();  
    }, []);

   

    return  (
                <>
                    <div>
                        <h1>Encuentra tu clínica</h1>
                    </div>
                        <div>

                                <Select 
                                    defaultValue={filterSelectClinic}
                                    options={provincesList}
                                    onChange={handleChangeSelect}
                                    
                                    />



                                {
                                    clinicListFilteredSelect.map((clinic) => (
                                        <div>
                                            <div>{clinic.title}</div>
                                            <div>{clinic.propsPhone}</div>
                                            <div>{clinic.mobile}</div>
                                            <div>{clinic.email}</div>
                                            <div>{clinic.province} </div>
                                            <div>{clinic.registry}</div>
                                        </div>
                                    ))
                                }
                            </div>

                          
                </>
            )
}

CodePudding user response：

In your filterSelect function, you are implicitly expecting termSearch to be a string termSearch: string. Looking at where filterSelect is used in handleChangeSelect it is passed this parameter provinceList: SingleValue<OptionType>.

Therefore the fix is:

termSearch.value.toLowerCase() 

And putting it into context with your code, this line:

if(element.province?.toString().toLowerCase().includes(termSearch.value.toLowerCase() )

That's because SingleValue<OptionType> has the property getter .value