'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 |
|---|
