I have a React application that when the search engine finds less than 10 matches shows me a button called "show" which, when clicked, should render the information of the country that was clicked on, but the problem I have is that when I click on a button of the country I select, the information on all the other buttons is displayed. When I require that said information when clicking on "show" the information is displayed individually just below the name of the country and the button.
Main code of my React app
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;
As the rendering of the buttons is done from a map, you have to discard the items that are different from the selected one. Look at this modified form of the code.