React native calendar - react-native

Question

I am trying to implement react native calendar agenda with marked dates and items dynamically from Firebase. I am not sure how to create the array required for this display. Below code gets data from firebase but I need to display the same. Please help me in creating array required by react native calendar
import React, {useState, useContext, useEffect} from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { CalendarList, Agenda } from "react-native-calendars";
import { Button, Card, Layout, Text } from '#ui-kitten/components';
import moment from 'moment';
import AppContext from './AppContext';
import firebase from '../firebase';
function Calendar() {
const todaysDate = new moment(new Date()).format("DD-MM-YYYY")
const [items, setItems] = useState([]);
const myContext = useContext(AppContext);
const groups = myContext.userGroups;
useEffect(() => {
function loadItems() {
firebase.database().ref("events").on("value", (userSnapshot) => {
userSnapshot.forEach(grpid => {
grpid.forEach(element => {
const gid = grpid.key;
groups.forEach(usergroupid => {
const usergrpid = usergroupid.groupid;
if(usergrpid === gid){
const id = element.key;
const sdate = moment((element.child('start').val()), 'DD-MM-YYYY');
console.log("sdate", sdate);
const start = moment(sdate).toDate();
console.log("start", start);
const edate = moment((element.child('end').val()), 'DD-MM-YYYY');
const end = moment(edate).toDate();
const title = element.child('title').val();
//items[sdate] = [];
items[sdate] = {name:title}
setItems(items);
console.log("new",items);
}
});
});
});
});
}
loadItems();
}, [])
const renderItem = (items) => {
return(
<TouchableOpacity>
<Card>
<View>
<Text>{items}</Text>
</View>
</Card>
</TouchableOpacity>
)
}
return (
<View style={{ paddingTop: 50, flex: 1 }}>
<Agenda
current={todaysDate}
minDate={todaysDate}
markedDates={{
'2020-12-24': [{selected: true, marked: true, selectedColor: 'blue', Name:"hello"}],
'2020-12-25': {marked: true},
'2020-12-26': {marked: true, dotColor: 'red', activeOpacity: 0},
}}
items={items}
renderItem={renderItem}
/>
</View>
);
}
export default Calendar;

Answer 1

You only need to add square braces around the dates
markedDates={{
[start]: {selected: true, marked: true, selectedColor: 'blue', Name:"hello"},
[edate]: {marked: true},
[end]: {marked: true, dotColor: 'red', activeOpacity: 0},
}}