0
263
ViewsHow to filter multiple options/strings of an array in one filter?
I'm trying to implement a multiple selection dropdown where users can filter accordingly, e.g. if Live and Scheduleis selected, only the results that have these two criteria should appear.
This is my current filtering function for the multi-select dropdown:
Filtering function & handleChange
const displayBulletins = bulletins
.filter((bulletin) => {
if (optionSelected === '') {
return bulletin
} else if (bulletin.liveStatus.toLowerCase().includes(optionSelected.map(item => item.value))) {
return bulletin
}
return false
})
const handleChange = selected => {
setOptionSelected(selected)
console.log(selected, '--optionsSelected')
console.log(selected.map(item => item.value), '--mappedOptionsSelected')
};
My current issue is that, if I have only selected 1 of the live status options, the filtering works, but if I selected more than one option, it doesn't work and filters out nothing instead, so what I'm trying to achieve here is to make it work for multiple selections such as ["live", "schedule"] in this case or for all 3 cases.
Here's my code sandbox for reference:
2 answers
Answer question0
The filter's callback should look something like this:
filter((bulletin) => {
if (optionSelected.length === 0) {
return true;
} else {
return optionSelected
.map((item) => item.value)
.includes(bulletin.liveStatus.toLowerCase());
}
})
because you have to check if the optionSelected array has the liveStatus but not the other way around.
Here's the updated CodeSandbox:
BTW defining function components in the body of a function component causes unnecessary rerenders. In the case of react-select it causes focus issues, this is why the dropdown is not closing when clicked outside.
0
The problem here is that optionsSelected is an array and bulletin.liveStatus is an array, so you need to look if liveStatus is in the optionsSelected array
I modify with the following in the code sandbox and it worked.
Also, don't forget to add a Fragment with a key instead <> to allow React to perform well in re-rendering virtual DOM.
If you want to display all bulletins if no option is selected, instead of return false you should return true
const displayBulletins = bulletins
.filter((bulletin) => {
if (optionSelected === []) {
return bulletin;
} else if (
optionSelected
.map((item) => item.value)
.includes(bulletin.liveStatus.toLowerCase())
) {
return bulletin;
}
return false;
})
.map((bulletin) => {
return (
<Fragment key={bulletin.bbID}>
<BulletinList
bulletin={bulletin}
onDelete={onDelete}
/>
</Fragment>
);
});