How to get all the matching values from an array in react native?

The array is Sports = [ "Football", "Tennis", "Volleyball", "Squash", ]

I tried getting all the matching values by using an if else statement below

 useEffect(() => {

        if (((Sports[0] || Sports[1]) || (Sports[2] || Sports[3])) == "Volleyball") { alert('Volleyball') }

        if (((Sports[0] || Sports[1]) || (Sports[2] || Sports[3])) == "Football") { alert('Football') }

        if (((Sports[0] || Sports[1]) || (Sports[2] || Sports[3])) == "Squash") { alert('Squash') }

    }, [Sports])

However the code would stops at the first value of the array which means it only runs the code block if (((Sports[0] || Sports[1]) || (Sports[2] || Sports[3])) == "Football") {alert('Football') }

How can this be corrected or is there another way of getting all the matching values from the array?

CodePudding user response：

This:

((Sports[0] || Sports[1]) || (Sports[2] || Sports[3])) == "Volleyball"

Evaluates to:

((true) || (true)) == "Volleyball"

Which isn't what you want

This is what you wanted:

Sports[0] == "Volleyball" || Sports[1] == "Volleyball" || Sports[2] == "Volleyball" || Sports[3] == "Volleyball"

But this will be better:

Sports.some(sport => sport == "Volleyball")

CodePudding user response：

What are you doing in your code is really misleading, what you want is

How to find a matching value in an array?

let query = 'Tennis';

let Sports = [ "Football", "Tennis", "Volleyball", "Squash", ];

let result = Sports.find(sportName => sportName == query);
let resultIndex = Sports.findIndex(sportName => sportName == query);

if(result) {
  // query is found and `result` equals the query
}

if(resultIndex != -1){
  // query is found and resultIndex represents its index
}

if(Sports.some(name => name == query)){
 // query is found but we can't know what is its index
}

Why your conditions with if is ruined?

Because the || operator is working like a short circuit that choose the first truthy value it encounters

so

true || false // => true
2 || true // => 2

You see how non-boolean values are converted(coerced) to boolean then evaluated, so

if (
(
(Sports[0] || Sports[1]) || 
(Sports[2] || Sports[3])) == "Volleyball"
) { 
  alert('Volleyball')
}

First condition (Sports[0] || Sports[1]) which is equals to String || String and while the first string is truthy(not empty) then the first string is returned which is Football, now the second condition is not even evaluated (Sports[2] || Sports[3])) == "Volleyball" because the first condition is satisfied and is truthy so it's returned

// how these condition can be evaluated 

(Sports[0] || Sports[1]) => 'Football' || 'Tennis'

(Sports[2] || Sports[3])) == "Volleyball" => ('Volleyball' || 'Squash') == 'Volleyball'

And what happened when that gigantic condition is converted to one string inside one if?

It's converted to a boolean, so Boolean('Football') => true so we always have if(true) in the first condition, that's why it always uses that code inside the first if statement

And if you're using react please don't do such logic in useEffect if not necessary.

Check if you can compute the existing of the value in your render function without using an effect and extra state to achieve things that can be computed or derived from your existing data.

CodePudding user response：

I don't think your condition is correctly written! Perhaps update as:

   if (Sports[0] == "Volleyball" || Sports[1] == "Volleyball" || Sports[2] == "Volleyball" || Sports[3] == "Volleyball") // etc...

Although that's still a terrible solution!