1

Tengo una aplicación en React que cuando el buscador encuentra menos de 10 coincidencias me muestra un botón llamado "show" el cual al hacerle click debe renderizar la información del país al que se le dió click, pero el problema que tengo es que al hacer click en un botón del país al que selecciono, se muestra la información en todos los demás botones. Cuando requiero que dicha información al hacer click en "show" se muestre individualmente la información justo debajo del nombre del país y del botón.

Código principal de mi aplicación React

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

const App = () => {
  const [countries, setCountries] = useState([]);
  const [searchCountry, setSearchCountry] = useState('');
  const [individualCountry, setIndividualCountry] = useState([]);
  
  useEffect(() => {
    axios.get('https://restcountries.eu/rest/v2/all')
         .then(response => setCountries(response.data))
         .catch(error => console.log(error));
  }, []);
  
  // console.log(countries);
  
  const handleSearchCountry = (event) => {
    setSearchCountry(event.target.value);
  };
  const handleShowCountryInfo = (country) => {
    setIndividualCountry(country);
  };
  const searchCountryResults = !searchCountry
      ? countries
      : countries.filter(country => country.name.toLowerCase()
                                           .includes(searchCountry.toLowerCase()));
  
  // console.log(individualCountry);
  if (searchCountryResults.length === 1) {
    return (
        <div>
          <p>find countries <input value={searchCountry} onChange={handleSearchCountry} type="text"
                                   placeholder="Search country"/></p>
          
          {searchCountryResults.map(country =>
              <div key={country.name}>
                <h1>{country.name}</h1>
                <p>capital {country.capital}</p>
                <p>population {country.population}</p>
                <h2>languages</h2>
                <ul>
                  {country.languages.map(countryLanguages => <li
                      key={countryLanguages.name}>{countryLanguages.name}</li>)}
                </ul>
                <img width={125} src={country.flag} alt={`${country.name} Flag`}/>
              </div>
          )}
        </div>
    );
  }
  
  if (searchCountryResults.length <= 10) {
    return (<div>
      <p>find countries <input value={searchCountry} onChange={handleSearchCountry} type="text"
                               placeholder="Search country"/></p>
      
      {/*{searchCountryResults.map(country =>
          <p key={country.name}>{country.name}
            <button onClick={() => handleShowCountryInfo(country)}>show</button>
            {individualCountry.name}
          </p>
      )}*/}
      {searchCountryResults.map(country =>
          <p key={country.name}> {country.name}
            <button onClick={() => handleShowCountryInfo(country)}>show</button>
            {/*{individualCountry.map(individualInfo=>individualInfo.name)}*/}
            {individualCountry.name}
          </p>)
      }
      
    </div>);
  }
  
  return (
      <div>
        <p>find countries <input value={searchCountry} onChange={handleSearchCountry} type="text"
                                 placeholder="Search country"/></p>
        
        {searchCountryResults.length > 10 && searchCountry !== ''
            ? <p>Too many matches, specify another filter</p>
            : searchCountryResults.map(country =>
                <p key={country.name}>{country.name}</p>
            )}
      </div>
  );
};


export default App;

Edit lucid-field-086ed

1 respuesta 1

1

Como el renderizado de los botones se hace desde un map, hay que descartar los items que sean diferentes al selecccionado. Mira esta forma modificada del código.

/** Linea 81 */
{searchCountryResults.map((country) => (
      <p key={country.name}>
        {" "}
        {country.name}
        <button onClick={() => handleShowCountryInfo(country)}>show</button>
        {individualCountry == country?individualCountry.name:''}
      </p>
    ))}
2
  • Muchas gracias compa funciona perfectamente Commented el 17 jun. 2021 a las 2:36
  • 1
    Tranquilo estamos para ayudarnos, saludos Commented el 17 jun. 2021 a las 2:42

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.