0

tengo dos react-select, en uno de ellos selecciono un estado de la república y lo que quiero es que al seleccionar ese estado me cambie en el otro react-select los municipios de ese estado a partir de los arreglos que tengo. Entonces básicamente si selecciono el estado de Chihuahua quiero que me regrese en el otro select los municipios de ese estado. El código que tengo es el siguiente:

const estados = [
{  value: 'Aguascalientes', label: 'Aguascalientes' },
{  value: 'Chiapas', label: 'Chiapas'},
{  value: 'Chihuahua', label: 'Chihuahua'}
];



const Chihuahua = [
    {value: 'Ahumada',label:'Ahumada'},
    {value:'Aldama',label:'Aldama'},
    {value:'Allende',label:'Allende'}
]

const seleccionarEstado = async municipios => {
  console.log(municipios);


}

<div className="w-1/2">
                        <div className="ml-2">
                            <label className=" text-gray-700 text-sm font-bold" htmlFor="nombre">
                                Estado
                            </label>
                            <Select 
                                className=""
                                options={ estados }
                                components={animatedComponents}
                                defaultValue={estados[5]}
                                isMulti={false}
                                onChange={ e=> seleccionarEstado(e.target.value)}
                                placeholder="Busque el estado"
                                noOptionsMessage={ () => "No hay resultados"}
                            />
                        </div>
                </div> 

                <div className="w-1/2">
                        <div className="ml-4">
                            <label className=" text-gray-700 text-sm font-bold" htmlFor="nombre">
                                Nombre
                            </label>
                            <Select 
                                className=""
                                options={ Chihuahua }
                                components={animatedComponents}
                                isMulti={false}
                                // onChange={}
                                placeholder="Busque el estado"
                                noOptionsMessage={ () => "No hay resultados"}
                            />
                        </div>
                </div> 

De antemano muchas gracias por su respuesta.

1
  • En ambos arreglos no hay ningun enlace que sirva para filtrar. Deberías partir por eso Commented el 29 may. 2020 a las 17:45

1 respuesta 1

0

Un consejo, como dicen en los comentarios, es tener un mejor control de tus arreglos para que tengan una relación, por ejemplo:

estados = [
    {
       //Guarda los municipios dentro de tu objeto de estado
       value: 'Aguascalientes',
       label: 'Aguascalientes'
       municipios: ['arreglo con sus municipios']
    },
    {
       //otro estado
    }
]

Esto te permite operar de mejor manera ambos arreglos, así, cuando seleccionen un estado, solo tienes que actualizar alguna variable municipioxEstado que obtenga el arreglo de municipios del estado seleccionado, eso es lo que tendrás que cargar en tu Select de los municipios. Espero que te sirva.

1
  • No había pensado como hacerlo, voy a cambiar esa parte, muchas gracias por el consejo! Commented el 5 jun. 2020 a las 17:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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