50 replies

⛄ Snowberb ⛄ – 12-56 May 26

Im trying to do a multi-filter function on React, and I'm really stuck.
I have diverse filters:

bookie: string[],
ganancia: { min: number, max: number },
completed: boolean,
event_date: 'ASC' | 'DESC'

bookie: string[],
ganancia: { min: number, max: number },
completed: boolean,
event_date: 'ASC' | 'DESC'

and I also have a lot of objects with those properties and more, called

bonuses: IBonus[]

bonuses: IBonus[]

My objective is that I have to apply all these filters to the

bonuses

bonuses

object at once, depending on what the user selects, for example,

bookies

bookies

could be

bet365

bet365

Sportium

Sportium

etc,

ganancia

ganancia

could have a

min

min

of 20€ and a

max

max

of 100€ etc.

How can I do this?

<div className="flex flex-col gap-y-3">
   Casas:
   {houses.map((house) => (
       <button key={house} onClick={() => filterBonuses('bookie', house)}>
         {house}
       </button>
   ))}
</div>

<div className="flex flex-col gap-y-3">
   Casas:
   {houses.map((house) => (
       <button key={house} onClick={() => filterBonuses('bookie', house)}>
         {house}
       </button>
   ))}
</div>

const filterBonuses = (filterType: keyof IBonus, option: string | number | boolean) => {
    const newItems = bonuses.filter((bonus) => bonus[filterType] === option)
    setFilteredItems(newItems)
  }

const filterBonuses = (filterType: keyof IBonus, option: string | number | boolean) => {
    const newItems = bonuses.filter((bonus) => bonus[filterType] === option)
    setFilteredItems(newItems)
  }

I could only achieve 1 filter at a time, I have no idea how I can chain all of them

⛄ Snowberb ⛄ – 12-56 May 26

Similar Threads