'Fetch data from API based on clicks and display it on modal React Native

I want to display data based on the day selected by the user on the calendar and displayed it on modal, this is my code for calendar

<Calendar style={styles.calendar} onDayPress={day => {
                    getCalendarEvent(day);
                }}
    markingType={'multi-dot'}
    markedDates={markedDay}/>

GetcalendarEvent() is a function that call the request from rest API, This is the code

const getCalendarEvent=(day)=>{
axios.get(`${BASE_URL_COURSE}&wsfunction=core_calendar_get_calendar_day_view&year=${day.year}&month=${day.month}&day=${day.day}`)
    .then(res=>{
        const data = (res.data)
        seteventItems(data)
        setModalVisible(true)
    }).catch(e=>{
        console.log(`error ${e}`)

    })
}

and i want to display data from GetcalendarEvent() function into modal, so i tried setModalVisible(true) inside of GetcalendarEvent() function. But it didn't worked, the data was not displayed on modal and just an empty flatlist.

this is my modal code

<View style={styles.centeredView}>
    <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
        Alert.alert("Modal has been closed.");
        setModalVisible(!modalVisible);
        }}
    >
        <View style={styles.centeredView}>
            <View style={styles.modalView}>
                
                <FlatList
                    data={eventItems}
                    renderItem={({item}) =>{
                    return (
                        
                    <View>
                        <Text style={styles.modalText}>{item.name}</Text>
                    </View>
                    
                    )
                }} />
    
                <Pressable
                style={[styles.button, styles.buttonClose]}
                onPress={() => setModalVisible(!modalVisible)}
                >
                <Text style={styles.textStyle}>Close</Text>
                </Pressable>
            </View>
        </View>
    </Modal>
   </View>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source