0

Estoy hace días intentando hacer una función que haga lo que dice el título pero no he podido. De esta manera se ve el buscador con las publicaciones que quiero filtrar:

Quiero lograr que el filtrado sea dinámico, osea que pueda usar todos a la vez así como algunos si y otros no.

Tengo un componente Filter que envía por props el estado de cada uno de los inputs. De esta manera, el botón "buscar" quedaría así:

      <button
    className="boton-buscar"
    onClick={() => {
      props.filtrar(depto, inmueble, estado, dormitorios);
    }}
  >
    BUSCAR
  </button>

En cuanto a la función filtrar, en el componente padre, hasta ahora la estoy formulando así:

  const filter = (depto, inmueble, estado, dormitorios) => {
const arrayFiltrado = [...arrayOriginal].filter((propiedad) => {
  if (propiedad.departamento !== "") {
    if (propiedad.departamento === depto) {
      return propiedad;
    }
  }
  if (propiedad.tipo !== "") {
    if (propiedad.tipo === inmueble) {
      return propiedad;
    }
  }
});
setArrayPublicaciones(arrayFiltrado);

};

Como ven, está incompleta en cuanto a las propiedades, pero en principio quiero probar filtrando dinámicamente por dos propiedades (en este caso depto e inmueble) para ver si funciona y aún no lo he logrado.

Agradezco cualquier ayuda, saludos!!

1 respuesta 1

0

Puedes hacer así, he supuesto que depto, inmueble, estado son strings y dormitorios un numero. si no es así habría que modificar alguna condicion en el if.

const filter = (depto, inmueble, estado, dormitorios) => {
    const arrayFiltrado = arrayOriginal.filter(elem => {
        if(((depto?.length > 0 && elem.departamento.toLowerCase() === depto.toLowerCase()) || !depto || depto.length === 0) &&
            ((inmueble?.length > 0 && elem.inmueble.toLowerCase() === inmueble.toLowerCase()) || ! inmueble || inmueble.length === 0) && 
            ((estado?.length > 0 && elem.estado.toLowerCase() === estado.toLowerCase()) || !estado || estado.length === 0) && 
            ((dormitorios && elem.dormitorios === dormitorios) || !dormitorios)){
            return elem;
        }
    }

}

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.