@Francoshum95
@fvlly
Submitted
Hello, I have the following questions:
@Francoshum95
Posted
You can use .filter() function to implement search & filter region instant of fetching API.
There are four conditions would happen: 1 ) searchWord === "" and region === "" (no search keyword and region selected) 2) searchWord !== "" and region === "" (have keywords and no region selected) 3) searchWord === "" and region !== "" (no keywords and have region selected) 4) searchWord !== "" and region !== "" (both exist)
First, put SearchBar.jsx and RegionFilter.jsx business logic to upper level so you can share the state value with other components. For instance, in Home.jsx:
const [searchTerm, setSearchTerm] = useState("");
....
return (
.....
<SearchBar setSearchTerm={setSearchTerm} searchTerm={searchTerm}/>
)
Then, you can create a new value and filter function to return the filtered value. To prevent unwanted rerending use useMemo add dependencies searchTerm, listOfCountries, filterRegion
const getFilterData = ({ listOfCountries,
searchTerm,
filterRegion}) => {
return listOfCountries.filter(data => {
if (searchTerm === data.name.split(" ").join("") ){
return true
}
......
})
}
const filteredData = useMemo(() => getFilterData({
listOfCountries,
searchTerm,
filterRegion
}), [listOfCountries, searchTerm, filterRegion]);
return (
...
)
To get the country name you can use an object to map it :
const hashMap = {
countryCode: CountryName
}
......
return (
....
{
borderCountries.map(item => (
<div>{hashMap[item]}</div>
))
}
)
Marked as helpful