0

Tengo un problema para crear dropdowns dependientes. Tengo dos dropdowns: uno que tendría el nombre del país y el otro que me entregue sus ciudades.

El error que me aparece es

TypeError
_paisesData$find.ciudades.map is not a function

Mi arreglo es mas o menos así:

const paisesData = [
  {
    nombre: "Argentina",
    ciudad: "Buenos Aires"
  },
  {
    nombre: "Mexico",
    ciudad: "Ciudad de México"
  },
  {
    nombre: "Francia",
    ciudad: "Paris"
  }
];

const [{ pais, ciudad }, setData] = useState([]);

const paises = paisesData.map((pais) => (
  <option key={pais.nombre} value={pais.nombre}>
    {pais.nombre}
  </option>
));

const ciudades = paisesData.find(item => item.nombre === pais)?.ciudades.map((ciudad) => (
  <option key={ciudad} value={ciudad}>
    {ciudad}
  </option>
));
1
  • No estoy seguro de esta expresión item.nombre === pais)?.ciudades.map...
    – g.4
    el 26 feb. 2022 a las 0:05

1 respuesta 1

0

segun tu estructura estás usando reactjs.

aquí te dejo el codigo de lo que buscas. y te dejo el enlace de un sandbox para que lo veas funcionando https://codesandbox.io/s/filter-select-by-other-select-xie5xd

import { useState, useEffect } from "react";
const paisesData = [
  {
    nombre: "Argentina",
    ciudad:  ["Buenos Aires", "Mar del Plata"]
  },
  {
    nombre: "Mexico",
    ciudad: ["Ciudad de México"]
  },
  {
    nombre: "Francia",
    ciudad: ["Paris"]
  }
];

export default function App() {
  const [data, setData] = useState([]),
    [pais, setPais] = useState(""),
    [ciudades, setCiudades] = useState([]);

  useEffect(() => {
    // captura de datos de la db o local
    setData(paisesData);
  }, []);

  useEffect(() => {
    data.forEach((data) => {
      if (data.nombre === pais) {
        setCiudades(data.ciudades);
      }
    });
  }, [pais]);

  return (
    <>
      <select defaultValue="" onChange={(event) => setPais(event.target.value)}>
        <option disabled value="">
          --Seleccione un pais--
        </option>
        {data.map((data) => {
          return (
            <option key={data.nombre} value={data.nombre}>
              {data.nombre}
            </option>
          );
        })}
      </select>
      <select>
        <option>--Seleccione una ciudad--</option>
        {ciudades.length > 0 &&
          ciudades.map((nombre, key) => {
            return (
              <option key={key} value={nombre}>
                {nombre}
              </option>
            );
          })}
      </select>
    </>
  );
}
3
  • Muchas gracias, es lo que estaba buscando. Una consulta, si en mi arreglo tengo algo así: {nombre: "Argentina", ciudad: "Buenos Aires"},{nombre: "Argentina", ciudad: "Mar del Plata"} Y en el dropdown no quiero que se vea dos veces Argentina, cómo debería hacerlo?
    – VanNought
    el 28 feb. 2022 a las 14:43
  • @VanNought sería mejor que hagas un array de las ciudades, algo como esto ` { nombre:"Argentina", ciudades:['Buenos Aires', 'Mar de plata','etc'] } ` en un momento hago el cambio de mi codigo anterior para mostrarte el ejemplo
    – Jasael
    el 28 feb. 2022 a las 16:30
  • Muchas gracias, te pasaste, me sirvió mucho. El problema es que toda esa info me llega de una api, por eso quería saber si se podía transformar el array
    – VanNought
    el 28 feb. 2022 a las 20:54

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.