Using multiple filters at once

Question

I am having trouble doing filtering on one of my lists. I am wondering what is the best approach to my problem. I currently have a list called games and a list called filteredGames . Whenever one of my 2 filters are applied, I then filter games and set it equal to filteredGames and display filteredGames if != null . I am running into the issue where if one filter is already being used, I get incorrect results. What is a nice way to get both of these being able to work together at once, but also on occasion, separately?

An example games list:

games = [{ homeTeam: 'Broncos', awayTeam: 'Colts', homeValue: true, awayValue: false },
         { homeTeam: 'Packers', awayTeam: 'Vikings', homeValue: false, awayValue: false }, 
         { homeTeam: 'Patriots', awayTeam: 'Bears', homeValue: false, awayValue: true },         
        ]

filterByTeam.js | payload:String //teamName

const filterByTeam = payload => {
    filteredGames = games.filter(
          (g) =>
            g.awayTeam.toLowerCase() === payload ||
            g.homeTeam.toLowerCase() === payload
        )
}

filterByType.js payload:Boolean //trueORfalse

const filterByType = payload => {
    filteredGames = games.filter(
           (g) =>
            g.homeValue === payload || g.awayValue === payload
        )
}

Rendering the arrays:

{filteredGames !== null
              ? filteredGames.map(game => <GameCard data={game} />)
              : games.map(game => <GameCard data={game} />)}

Answer 1

You could define these constant variables setting them all equal to zero. Then you could create an if function (triggered by what ever event you want it to be triggered by) where you redefine the variable. This way, under certain circumstances you could run a function that defines const filterByTeam and only filterByTeam,

const filterByType = 0
const filterByTeam = 0
function defineFiltByType() {
    const filterByType = payload => {
        filteredGames = games.filter(
                (g) =>
                g.homeValue === payload || g.awayValue === payload
            )
    }
}
function defineFiltByTeam() {
    const filterByTeam = payload => {
        filteredGames = games.filter(
                (g) =>
                g.awayTeam.toLowerCase() === payload ||
                g.homeTeam.toLowerCase() === payload
        )
   }
}
function defineBoth() {
    const filterByTeam = payload => {
        filteredGames = games.filter(
                (g) =>
                Team.toLowerCase() === payload ||
                g.homeTeam.toLowerCase() === payload
        )
    }
    const filterByType = payload => {
        filteredGames = games.filter(
                (g) =>
                g.homeValue === payload || g.awayValue === payload
        )
    }
}

    

const filterByType and only filterByType, and one that defines both of these constant variables at once. You would then write code to trigger these functions.

I hope this helps. It would help make your code more flexible when it comes to defining your constant variables together or apart.