2

Tengo una aplicación la cual en primera instancia muestra muestra todos los países, si el filtro coincide con un único País muestra todos los datos de ese país, la cuestión viene aquí, estoy ocupando un API de clima la cual por URL debo enviar el nombre del país o la capital de dicho país de la única coincidencia del buscador cuando solo muestra un único país

Parte del código con problema

La parte del código donde presento el problema es el siguiente, aquí hago la solicitud a la API, pero en Quito debe ir solo el país que muestra como única coincidencia el filtro de búsqueda, osea debe ser dinámico ese campo por lo que no sé como hacerlo ya que el único lugar donde se renderizaría es en el primer if donde si la longitud del buscador es igual a 1 procede a renderizar toda la información del país y ahi debería ir la información del clima.

useEffect(() => {
axios.get(`https://api.openweathermap.org/data/2.5/weather?q=Quito&appid=c97566f1aafdd1d33ea80ef1a1ccfebd`)
     .then(response => {
       const apiResponse = response.data;
       console.log(apiResponse);
       setWeatherInfo(apiResponse);
     }).catch(error => {
  console.log(error);
});
}, []);

Aquí debo renderizar la información del clima del país que muestra como única coincidencia el buscador

  if (findCountry.length === 1) {
    return (
        /*findCountry.map(countryData => <div>
          <p>find countries <input onChange={handleFindCountry}/></p>
          <h1>{countryData.name}</h1>
          <p>capital {countryData.capital}</p>
          <p>population {countryData.population}</p>
          <h2>Languages</h2>
          <ul>
            {countryData.languages.map(languageName => <li key={countryData.alpha2Code}>{languageName.name}</li>)}
          </ul>
          <img height={100} src={countryData.flag} alt={countryData.name}/>
        </div>)*/
        <div>
          <p>find countries <input onChange={handleFindCountry}/></p>
          <h1>{findCountry[0].name}</h1>
          <p>capital {findCountry[0].capital}</p>
          <p>population {findCountry[0].population}</p>
          <h2>Languages</h2>
          <ul>
            {findCountry[0].languages.map(languageName => <li key={languageName.name}>{languageName.name}</li>)}
          </ul>
          <img height={100} src={findCountry[0].flag} alt={findCountry[0].name}/>
          <h2>Weather in {findCountry[0].capital}</h2>
          <strong>temperature: {weatherInfo.weather[0].icon}</strong>
        </div>
    );
  }

Código completo de la aplicación

Código de la aplicación

1 respuesta 1

1

Te recomiendo esta forma de hacerlo:

Primero creamos un nuevo estado llamado capital con el valor inicial "Quito".

const [capital, setCapital] = useState("Quito");

Luego modificamos la función handleFindCountry y le agregamos un par de cosas más.

const handleFindCountry = (event) => {
    setFindCountries(event.target.value);
    const findCountry = countries.filter((country) =>
      country.name.toLowerCase().includes(event.target.value.toLowerCase())
    );
    if (findCountry.length === 1) {
      setCapital(findCountry[0].capital);
      console.log("setCapital ");
    }
  };

Ahí dentro estará la condición de que si es un solo país el encontrado, se setee el estado capital justamente con la capital del país.

Después, modificamos el useEffect() que traerá los datos del clima de la capital.

useEffect(() => {
    // const countryCapital = countries.map(countryCap=>countryCap.capital)
    // console.log(countryCapital);
    axios
      .get(
        `https://api.openweathermap.org/data/2.5/weather?q=${capital}&appid=c97566f1aafdd1d33ea80ef1a1ccfebd`
      )
      .then((response) => {
        const apiResponse = response.data;
        console.log(apiResponse);
        setWeatherInfo(apiResponse);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [capital]);

De esa forma, mediante el ${capital}, hacemos que la consulta sea dinámica y con el [capital] hacemos que se ejecute por cada vez que se setea el estado.

Ahora se mostrará dinámicamente el clima de cada capital.

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 [showCountryInfo, setShowCountryInfo] = useState("");
  const [weatherInfo, setWeatherInfo] = useState([]);
  const [capital, setCapital] = useState("Quito");

  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(event.target.value.toLowerCase())
    );
    if (findCountry.length === 1) {
      setCapital(findCountry[0].capital);
      console.log("setCapital ");
    }
  };
  const findCountry = countries.filter((country) =>
    country.name.toLowerCase().includes(findCountries.toLowerCase())
  );

  useEffect(() => {
    // const countryCapital = countries.map(countryCap=>countryCap.capital)
    // console.log(countryCapital);
    axios
      .get(
        `https://api.openweathermap.org/data/2.5/weather?q=${capital}&appid=c97566f1aafdd1d33ea80ef1a1ccfebd`
      )
      .then((response) => {
        const apiResponse = response.data;
        console.log(apiResponse);
        setWeatherInfo(apiResponse);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [capital]);

  console.log(weatherInfo);

  const showCountryInformation = (event) => {
    // console.log(event.target.value);
    setShowCountryInfo(() => {
      const singleCountryInfo = countries.filter((country) =>
        country.name.toLowerCase().includes(event.target.value.toLowerCase())
      );

      return (
        <div>
          <h1>{singleCountryInfo[0].name}</h1>
          <p>capital {singleCountryInfo[0].capital}</p>
          <p>population {singleCountryInfo[0].population}</p>
          <h2>Languages</h2>
          <ul>
            {singleCountryInfo[0].languages.map((languageName) => (
              <li key={languageName.name}>{languageName.name}</li>
            ))}
          </ul>
          <img
            height={100}
            src={singleCountryInfo[0].flag}
            alt={singleCountryInfo[0].name}
          />
        </div>
      );
    });
  };

  if (findCountry.length === 1) {
    return (
      /*findCountry.map(countryData => <div>
          <p>find countries <input onChange={handleFindCountry}/></p>
          <h1>{countryData.name}</h1>
          <p>capital {countryData.capital}</p>
          <p>population {countryData.population}</p>
          <h2>Languages</h2>
          <ul>
            {countryData.languages.map(languageName => <li key={countryData.alpha2Code}>{languageName.name}</li>)}
          </ul>
          <img height={100} src={countryData.flag} alt={countryData.name}/>
        </div>)*/
      <div>
        <p>
          find countries <input onChange={handleFindCountry} />
        </p>
        <h1>{findCountry[0].name}</h1>
        <p>capital {findCountry[0].capital}</p>
        <p>population {findCountry[0].population}</p>
        <h2>Languages</h2>
        <ul>
          {findCountry[0].languages.map((languageName) => (
            <li key={languageName.name}>{languageName.name}</li>
          ))}
        </ul>
        <img height={100} src={findCountry[0].flag} alt={findCountry[0].name} />
        <h2>Weather in {findCountry[0].capital}</h2>
        <strong>temperature: {weatherInfo.weather[0].icon}</strong>
      </div>
    );
  }

  if (findCountry.length <= 10 && findCountries.length > 1) {
    return (
      <div>
        <p>
          find countries <input onChange={handleFindCountry} />
        </p>

        {findCountry.length > 10 && findCountries !== "" ? (
          <p>Too many matches, specify another filter</p>
        ) : (
          findCountry.map((country) => (
            <p key={country.name}>
              {country.name}
              <button value={country.name} onClick={showCountryInformation}>
                show
              </button>
            </p>
          ))
        )}

        {showCountryInfo}
      </div>
    );
  }

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

      {findCountry.length > 10 && findCountries !== "" ? (
        <p>Too many matches, specify another filter</p>
      ) : (
        findCountry.map((country) => <p key={country.name}>{country.name}</p>)
      )}
    </div>
  );
};

export default App;

Código de la aplicación

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

1
  • 1
    Muchas gracias compa, funciona según lo que requería. el 20 jun. 2021 a las 3:43

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.