Show and Hide Condition in React

I have a simple problem here which I can’t figure out. I wanted to hide menus depending on the condition.

For example if status contains at least one “Unlinked”. “All unlinked images” menu should appear. I did used .some and I wonder why it doesn’t return a boolean.

Codesandbox is here Click here

  const showDeleteAllInvalidButton = () => {
    const productImages = products?.flatMap((product) =>
      product.productImages.filter((image) => image?.status)
    );

    return productImages?.some((e) => e?.status === "Invalid");
  };

  const showDeleteAllUnlinkedButton = () => {
    const productImages = products?.flatMap((product) =>
      product.productImages.filter((image) => image?.status)
    );

    return productImages?.some((e) => e?.status === "Unlinked");
  };

Answer

The methods do return a boolean. But in the menus array you are assigning a function reference not the result –

show: showDeleteAllInvalidButton // function reference

show is now assigned a reference to the function showDeleteAllInvalidButton not the result of productImages?.some. You need to invoke the functions when assigning –

show: showDeleteAllInvalidButton() // result of productImages?.some