@jyotirmoy-sinhababu
Posted
I have used const handleRegionChange = async (region) => { try { await axios .get(`https://restcountries.com/v3.1/region/${region}`) .then((res) => { if (res.status == 200) { setDataByRegion(res.data); } if (res.status != 200) { setIsErr(false); } }); } catch (err) { console.log(err); } };
as a filter function, where each region is a button and selecting the button will call the function with the selected region as an argument.
For style I think you have used flex and flex-wrap, just reduced the gap between cards and increase the width of the cards , I think in that way it will look better.
@ijklmopffs
Posted
@jyotirmoy-sinhababu i noticed you used the api, meanwhile i used the json file to pull the data, so I'm trying to see how that would work
@GPMS
Posted
@ijklmopffs You could use Array.prototype.filter:
const filteredData = data.filter(country => filterRegion === 'default' || country.region === filterRegion)
For the name filter you could do the same thing and even also check the aliases (to allow "usa" for "United States of America"):
const filteredData = data.filter(country => {
const possibleNames = country.altSpellings
? [country.name, ...country.altSpellings]
: [country.name];
return possibleNames.some((name) => name.toLowerCase().includes(filterText.toLowerCase()))
})
For both just put it all in the same filter call and adjust the code. You could replicate this with just for loops but using functions like filter and some make your code more readable.
After that you just need to render the filteredData instead of data.
