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;