I have an array of objects called brands, and I want to apply multiple filters to it, which are 'Connections' and 'Types'.
I would like the the first filter and second filter to work together, meaning whatever combination is chosen from each, the array is filtered accordingly and the correct results (objects) are showing on the page.
I already have a filter function and it works for the first filter (Connections). I have been trying to add more if/else statements to it to make the second filter work too, but it hasn't. I'm not sure where to go.
I'm trying to keep it down to having only one filter function if possible and this is what I've got so far:
const [filterValueConnection, setFilterValueConnection] = React.useState('all')
const [filterValueType, setFilterValueType] = React.useState('allTypes')
const filteredBrands = (brands) => {
const connections = brands.filter(brand => {
if (filterValueConnection === 'multipleConnections') {
return brand.multipleConnections === true
} else if (filterValueConnection === 'singleConnection') {
return brand.singleConnection === true
} else {
return filterValueConnection === 'all'
}
})
console.log(connections)
return connections.filter(connection => {
if (filterValueType === 'clothing') {
return connection.clothing === true
} else if (filterValueType === 'footwear') {
return connection.footwear === true
} else {
return filterValueType === 'allTypes'
}
})
return connections
}And this is how I'm getting the data in jsx:
{brands ?
filteredBrands(brands).map(brand => (
<BrandCard
key={brand._id}
name={brand.name}
logo={brand.logo}
clothing={brand.clothing}
footwear={brand.footwear}
brandId={brand._id} />
))
:
<p>...loading</p>
}