0

I'm trying to make a validation for my dropdown, where if the user chose a value that is already chosen the app should prompt a modal for the validation.

I have 2 arrays, first tagsData that I use to display the tags in my dropdown, second is slidesDetails which is a param from a different screen/page that I use to check if there's a tag that is already chosen.

Then I use for loop and if else to iterate through the arrays and check if the tags of dropdown is already chosen, if yes, then modal should prompt for the user validation. And if the tag is not yet chosen, the app should navigate to another screen and display those tags in a Flatlist.

Base on console.log, it is detecting where and when the tags is matching. The problem is, it is keeping on looping and then navigating to another screen regardless of the condition.

Note: My Flatlist is detecting if there is a tag with the same Key that is why I seriously need to accomplish my validation.

const tagsData = [
  { id: '1', label: 'Store Schedule', tagValue: "Store Schedule" },
  { id: '2', label: 'Substandard Items', tagValue: "Substandard Items" },
  { id: '3', label: 'Promo Display', tagValue: "Promo Display" },
  { id: '4', label: 'Rack Display', tagValue: "Rack Display" },
  { id: '5', label: 'Chiller Display', tagValue: "Chiller Display" },
  { id: '6', label: 'Freezer', tagValue: "Freezer Display" }
];
const openCam = async () => {
  tagsData.map(async (item) => {
    slidesDetails.map(async (elements) => {
      // console.log("_____updatedSlides: ", updatedSlides);
      var I_tagValue = item.tagValue;
      var E_tagValue = elements.tagValue;
      console.log("_____tagsValue_Data: ", E_tagValue);

      for (let i = 0; i < E_tagValue.length; i++) {
        console.log("_____I_tagValue: ", I_tagValue);
        if (I_tagValue !== E_tagValue) {
          console.log("_____tagItem: ", E_tagValue);
          console.log("Continue");
    
          setSlideDetails(updatedSlides);
          await AsyncStorage.setItem('tagKey', JSON.stringify(updatedSlides))
          navigation.dispatch(
          StackActions.replace("Deck_Report", {
                   *** route.params ***
                  })
               );
    
                break;
              } else {
                console.log("Match items")
               return (
                  <SafeAreaView>
                    <Modal visible={true}>
                      <SafeAreaView style={[styles.fill, styles.grey]}>
                        <Button title='Hide' onPress={hideModal} />
                      </SafeAreaView>
                    </Modal>
                  </SafeAreaView>
                )
              }
    
              break;
            }
          })
        })
      }

This my console.log

enter image description here

This is my out put in a Flatlist

enter image description here

Mearaj
  • 1,828
  • 11
  • 14
user22140489
  • 1
  • 1
  • Do you really have backticks at the beginning of every line? – Barmar Jun 27 '23 at 17:00
  • [Please post code/errors/etc as formatted text instead of links to images of formatted text.](https://meta.stackoverflow.com/questions/285551/why-should-i-not-upload-images-of-code-data-errors-when-asking-a-question/285557#285557) It may be worth cleaning up the code snippet. – Dave Newton Jun 27 '23 at 17:01
  • You're not assigning the result of `tagsData.map()` anywhere. Why is `openCam()` declared `async`? It never uses `await` (it's used in the nested function, but that doesn't require the outer function to be async). – Barmar Jun 27 '23 at 17:03

1 Answers1

0

Instead of break, try with return statement.

Antony SUTHAKAR J
  • 912
  • 1
  • 7
  • 13