I am applying following filter on a table with the help if useEffect
useEffect(()=>{
let updated = data.filter(function(e){
if ((e.country === aaa|| e.country === undefined) && (e.age === bbb|| e.age === undefined)){
return true
}
})
setRows(updated)
},[aaa, bbb])
it works fine when "Select" for both the filters are selected if one if them is undefined then it does not show any data
I prefer making multiple functions when filtering criteria differs. It's more readable for other developers and easier to modify and maintain.
I don't know about the actual end result since I don't know your exact use case. But this structure of code should give you a hint on how to approach that:
const byCountry = (country) => (item) => {
return item.country === country || item.country === undefined;
};
const byAge = (age) => (item) => {
return item.age === age || item.age === undefined;
};
const getUpdated = (data, country, age) => {
return data
.filter(byCountry(country))
.filter(byAge(age));
};
const data = [{
country: 'Finland',
age: '42',
}, {
country: 'Sweden',
age: '39',
}, {
country: 'Sweden',
}];
console.log(getUpdated(data, 'Finland', '42'));
console.log(getUpdated(data, 'Sweden', '39'));