I am trying to open a modal from a scrollview - reactjs

Question

I am trying to open a modal from the 3rd element of the scrollview. Ive tried opening the modal without using state but had a problem closing it. Ive added state but I get a render error. This is a piece of my code
const dummy = [
{ gender: 'Female', id: '1' },
{ gender: 'Male', id: '2' },
{ gender: 'More', id: '3' },
];
const [year, setYear] = useState();
const [modalOpen, setModalOpen] = useState(false);
const [selectedId, setSelectedId] = useState(null);
const pressHandler = item => {
setSelectedId(item.id);
selectedId == 3 ? setModalOpen(true) : setModalOpen(false);
};
<View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
<ScrollView horizontal>
{dummy.map((item, index) => {
const bgColor =
item.id === selectedId ? COLORS.primary : COLORS.card;
return (
<View key={item.id}>
<TouchableOpacity
activeOpacity={0.8}
onPress={pressHandler(item)}
style={{
backgroundColor: bgColor,
borderRadius: 8,
alignItems: 'center',
marginLeft: 12,
marginTop: 12,
}}>
<Text
style={{
paddingVertical: 12,
paddingHorizontal: 20,
color: COLORS.white,
fontFamily: 'Gilroy-Medium',
fontSize: 16,
lineHeight: 24,
}}>
{item.gender}
</Text>
</TouchableOpacity>
{selectedId == 3 && (
<Modal
visible={modalOpen}
transparent={true}
animationType="slide">
<View style={styles.modalBox}>
<Text style={styles.modalHeader}>Gender Identity</Text>
<TouchableOpacity style={styles.modalSelect}>
<Text style={styles.gendSelect}>Non-Binary</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.modalSelect}>
<Text style={styles.gendSelect}>Prefer Not to Say</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.modalClose}
onPress={() => setModalOpen(false)}>
<Text style={styles.gendSelect}>Cancel</Text>
</TouchableOpacity>
</View>
</Modal>
)}
</View>
);
})}
</ScrollView>
</View>
but I get a render error from React saying
Too many re-renders. React limits the number of renders
to prevent an infinite loop

Answer 1

Because you call pressHandler when render. Just update onPress to:
onPress={() => pressHandler(item)}