I'm working on implementing a validation system for my dropdown menu. If a user selects a value that has already been chosen, I want the application to display a modal for validation.
To achieve this, I have two arrays: tagsData, which contains the tags displayed in the dropdown menu, and slidesDetails, a parameter from another screen/page that helps me check if a tag has already been selected.
Using a combination of for loops and if-else statements, I iterate through both arrays to determine if the selected tag is already in use. If it is, a modal prompts the user for validation. If not, the app navigates to another screen and displays the tags in a Flatlist.
While console.log indicates where the matching tags are detected, the issue arises when the loop continues indefinitely, navigating to the next screen regardless of the condition.
Note: The Flatlist relies on detecting identical keys, emphasizing the importance of resolving the validation process.
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) => {
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;
}
})
})
}