4

Tengo la siguiente aplicación pero quisiera crear un condicional que creo es un poco complejo y es el siguiente

Si la consulta tiene más de 10 coincidencias que me salga el siguiente mensaje debajo del input

Too many matches, specify another filter

introducir la descripción de la imagen aquí

Si la consulta tiene menos de 10 coincidencias muestre los nombres de los paises que coincidan

introducir la descripción de la imagen aquí

Y si inicia la aplicacion sin ninguna letra en el filtro de busqueda que muestre todos los paises

introducir la descripción de la imagen aquí

Este es el código, puesto que es en react ocupo CodeSandbox.

Aplicación de Filtro de Países:

import axios from "axios";
import { useState, useEffect } from "react";

const App = () => {
  const [countries, setCountries] = useState([]);
  const [findCountries, setFindCountries] = useState("");

  useEffect(() => {
    axios.get("https://restcountries.eu/rest/v2/all").then((response) => {
      // console.log(response);
      setCountries(response.data);
    });
  }, []);

  const handleFindCountry = (event) => {
    setFindCountries(event.target.value);
  };

  const findCountry = countries.filter((country) =>
    country.name.toLowerCase().includes(findCountries.toLowerCase())
  );

  return (
    <div>
      <p>
        find countries <input onChange={handleFindCountry} />
      </p>

      <ul>
        {findCountry.map((country) => (
          <li key={country.alpha2Code}>{country.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Edit new

2 respuestas 2

3

En realidad no es demasiado complejo, pero sí requeriría varios cambios en tu código.

Podrían haber varias formas de hacerlo, pero yo te propongo esta:

Primero creamos un nuevo estado llamado limitExceded y lo inicializamos en false.

const [limitExceded, setLimitExceded] = useState(false);

Con ese estado definiremos qué es lo que se mostrará en la pantalla de esta forma...

<ul>
    {!limitExceded &&
      findCountry.map((country) => (
        <li key={country.alpha2Code}>{country.name}</li>
      ))}
  </ul>
  {limitExceded && <p>{limitExceded}</p>}

Así, si limitExceded es false imprimirá todos los países pero sí ese estado tiene contenido entonces mostrará el mensaje que le pondremos más adelante.

A continuación, creamos una nueva función findCountry2 que en vez de procesar los datos del estado findCountries, trabajará con un argumento que le vamos a pasar. Eso lo vamos a hacer en la función handleFindCountry .

Dentro de dicha función, como argumento le pasamos lo que escribimos en el input y creamos un nuevo objeto llamado conutriesFound.

 let conutriesFound = findCountry2(event.target.value);

Y ahora sí podemos establecer el limite de resultados que se mostrarán.

if (conutriesFound.length === 0 || conutriesFound.length < 10 || event.target.value === "") {
  setFindCountries(event.target.value );
  setLimitExceded(false);
} else {
  setLimitExceded("Too many matches, specify another filter");
}

Si los países encontrados son menos de 10 o 0, o el input está vacío, volvemos false a limitExceded y actualizamos el estado findCountries. Caso contrarío, al estado limitExceded le pasamos el mensaje "Too many matches, specify another filter".

Haciendo todos esos cambios, todo el código quedaría así:

import axios from "axios";
import { useState, useEffect } from "react";

const App = () => {
  const [countries, setCountries] = useState([]);
  const [findCountries, setFindCountries] = useState("");
  const [limitExceded, setLimitExceded] = useState(false);

  useEffect(() => {
    axios.get("https://restcountries.eu/rest/v2/all").then((response) => {
      // console.log(response);
      setCountries(response.data);
    });
  }, []);

  const handleFindCountry = (event) => {
    let conutriesFound = findCountry2(event.target.value);
    if (
      conutriesFound.length === 0 ||
      conutriesFound.length < 10 ||
      event.target.value === ""
    ) {
      setFindCountries(event.target.value);
      setLimitExceded(false);
    } else {
      setLimitExceded("Too many matches, specify another filter");
    }
  };

  const findCountry = countries.filter((country) =>
    country.name.toLowerCase().includes(findCountries.toLowerCase())
  );
  const findCountry2 = (countriesToSearch) =>
    countries.filter((country) =>
      country.name.toLowerCase().includes(countriesToSearch.toLowerCase())
    );

  return (
    <div>
      <p>
        find countries <input onChange={handleFindCountry} />
      </p>

      <ul>
        {!limitExceded &&
          findCountry.map((country) => (
            <li key={country.alpha2Code}>{country.name}</li>
          ))}
      </ul>
      {limitExceded && <p>{limitExceded}</p>}
    </div>
  );
};

export default App;

Edit new

Pruébalo en el fork que hice de tu código.

Aclaro que, como dije al principio, hay otras maneras de hacer esto y de hecho esta forma que te ofrezco quizás no sea la más limpia. Pero al menos aportaría una solución a lo que buscas hacer.

1
  • 1
    Muchas gracias compa, tu solución realmente hace lo que requería. Saludos. Commented el 14 jun. 2021 a las 1:35
2

Simplemente deberías validar que el resultado de la búsqueda sea mayor a 10 y que el input de búsqueda este con algún valor.

{(findCountry.length > 10 && (findCountries && findCountries !== '')) ? `Too many matches, specify another filter` : findCountry.map(country =>
        <li key={country.alpha2Code}>{country.name}</li>)}

Nos comentas si es lo que necesitas :D

1
  • Muchas gracias compa, debido a la facilidad de la implementación de código con respecto al problema planteado, funciona correctamente la solución que propones. Saludos. Commented el 14 jun. 2021 a las 1: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.