how to go through react state variable array and determine if it has one true value

Question

I have a state variable like the following

const Home = ({ t, i18n, history }) => {
  const [otherStudiosAvailable, setOtherStudiosAvailable] = useState([]);

  const studios = ["de", "fr", "pl", "en", "nl", "ru"];
  const otherStudios = studios.filter(item => {
    return item !== i18n.language;
  });

  useEffect(() => {
    let others = [];
    for (const studio of otherStudios) {
      checkForAvailableAgent(
        `sales_${studio}`,
        "Linktostudio",
        "serviceID"
      )
        .then(res => {
          others[studio] = res;
          setOtherStudiosAvailable(others);
        })
        .catch(error => {
          console.log("an error happened.");
        });
    }
   }, []);

}

{otherStudiosAvailable.indexOf(true) ? (

    <Button
      variant="success"
       onClick={e => callBtnClick("flag")}
    >
    Other studios available
    </Button>

    ) : ("")
   }

I need to have a conditional check in JSX based on otherStudiosAvailable, if it has at least one true value

any help would be appreciated.

if otherStudiosAvailable has at least one true show the button otherwise don't show anything — akano1, Oct 11 '19 at 08:11
i think the condition should be otherStudiosAvailable.indexOf(true) !== -1, because if the true exists in the first element (index 0 ) the result will be false — Seifeddine Besbes, Oct 11 '19 at 08:12
How is this different to your other question? https://stackoverflow.com/questions/58336179/how-to-check-if-an-array-has-at-least-one-true-value — Joseph D., Oct 11 '19 at 08:29

Avinash · Accepted Answer · 2019-10-11T08:38:17.280

0

Actually indeOf would return -1 in case if true is not present in the array but the truthy value of -1 is true, hence you need to explicitly check if its not equal to -1(which indicates the presence of the element) Object.values(otherStudiosAvailable) returns the array of values present in this object

 {Object.values(otherStudiosAvailable).indexOf(true)!==-1 ? (

    <Button
       variant="success"
      onClick={e => callBtnClick("flag")}
    >
    Other studios available
    </Button>

    ) : ("")
}

edited Oct 11 '19 at 08:38

answered Oct 11 '19 at 08:12

Avinash

1,864
2
21
27

console.log(otherStudiosAvailable) gives en: true fr: false nl: false pl: false ru: false however I always get false in the indexOf(true) – akano1 Oct 11 '19 at 08:20
does it return an array of objects ? my answer is valid in case otherStudiosAvailable is an array of values(not objects) – Avinash Oct 11 '19 at 08:26
upon further inspection, i understand that the otherStudiosAvailable is an object i've updated my answer based on it – Avinash Oct 11 '19 at 08:28
I get the TypeError: otherStudiosAvailable.values(...).indexOf is not a function – akano1 Oct 11 '19 at 08:33
@akano1 sorry my bad its Object.values(otherStudiosAvailable) i've updated my answer, this should definitely fix the issue!! – Avinash Oct 11 '19 at 08:39

score 0 · Answer 2 · answered Oct 11 '19 at 08:14

0

I propose this solution

    {otherStudiosAvailable.indexOf(true)!==-1 && (

    <Button
       variant="success"
      onClick={e => callBtnClick("flag")}
    >
    Other studios available
    </Button>

    )
}

answered Oct 11 '19 at 08:14

Seifeddine Besbes

393
1
9

how to go through react state variable array and determine if it has one true value

2 Answers2