1

Estoy tratando de validar el selector de provincias y recibir por pantalla la provincia seleccionada. No sé exactamente cómo se declaran los tipos correctamente.

import React, { useState, useEffect } from 'react'
import Select from 'react-select'


export const SearchFilterClinics = () => {

    const [filterSelectClinic, setFilterSelectClinic] = useState<OptionType>(provinces[]);


      type OptionType = {
        value: string;
        label: string;
      };

      const provinces: OptionType[] = [
          { label: 'Alava/Araba', value: 'Alava/Araba'}
          { label: 'Barcelona', value: 'Barcelona'}
          { label: 'Madrid', value: 'Madrid'}

                                                        
          
      ]

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

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

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

                                <Select 
                                    value={filterSelectClinic}
                                    options = {provinces}
                                    onChange = {(province) => handleChangeSelect(province)}
                                    
                                    />


                                <div>RESULTADO</div>
                                    {filterSelectClinic} 
                                </div>
       
                </>
            )
}

1 respuesta 1

2
import React, { useState } from 'react'
import Select, { SingleValue } from 'react-select'

type OptionType = {
    value: string;
    label: string;
};
const provinces: OptionType[] = [
    { value: 'Alava/Araba', label: 'Alava/Araba' },
    { value: 'Barcelona', label: 'Barcelona' },
    { value: 'Madrid', label: 'Madrid' },
]
export const SearchFilterClinics = () => {

    const [filterSelectClinic, setFilterSelectClinic] = useState<SingleValue<OptionType>>(provinces[1]);

    const handleChangeSelect = (province: SingleValue<OptionType>) => {
        console.log(province)
        setFilterSelectClinic(province);
    }
    return (
        <div>
            <div>
                <h1>Encuentra tu clínica</h1>
            </div>
            <div>
                <Select
                    defaultValue={filterSelectClinic}
                    options={provinces}
                    onChange={handleChangeSelect}
                />
                <div>RESULTADO</div>
                {filterSelectClinic?.label}
            </div>

        </div>
    )
}

Luego si quieres responder qué clínica hay en esa provincia, debes usar un useEffect y otro useState, por ejemplo:

 const [respuesta, setRespuesta] = useState('');

    useEffect(() => {
        if (filterSelectClinic?.value === 'Alava/Araba') {
            setRespuesta('Clinica de Alava/Araba');
        } else if (filterSelectClinic?.value === 'Barcelona') {
            setRespuesta('Clinica de Barcelona');
        } else if (filterSelectClinic?.value === 'Madrid') {
            setRespuesta('Clinica de Madrid');
        }
    }, [filterSelectClinic])
1
  • muchas gracias, me a ido muy bien tu ayuda, estoy trabajando en un proyecto con typescript y la verdad que me esta costando. el 31 ago. 2022 a las 18:20

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.