fetch data using react native sectionList - react-native

Question

I'm working with firestore and i'm trying to fetch the data into my SectionList component. I want the sections to be broken up by the dates in my firestore data. For instance, if a user has booked a date of Sep 12th then the section header should show the previous Sunday (in this case Sep 9th)for the given date. My issue is I keep getting error "sectionlist length undefined". I understand it needs to be an array. How do I place the info from the array from firestore into the section 'data' and 'title' props.
I've already pulled data from the collection and placed it into this.state. I need to plug the info from dates into sections of my sectionlist component.
onCollectionUpdate = (querySnapshot) => {
var history = this.state.history;
let that = this;
querySnapshot.forEach((doc) => {
const { date, displayName, hours, image} = doc.data();
history.push({
key: doc.id,
date: doc.data().date,
displayName: doc.data().displayName,
hours: doc.data().hours,
image: doc.data().image,
});
});
that.setState({
history,
sections,
loading: false,
});
}
I was able to get the list to populate but each item is in its own view. I'm working on a way to get all dates within the same week to fall under the Sunday of that week view group. This is my function which i know i need to manipulate the way the array is pushed.
onCollectionUpdate = (querySnapshot) => {
// make copy of history object
let that = this;
let history = this.state.history;
let sectionExist = false;
//let history = JSON.stringify(JSON.parse(this.state.history);
querySnapshot.forEach((doc) => {
// find last sunday
var dates = moment(doc.data().date);
var weekOf = dates.startOf('week').valueOf();
var weekOfFormat = moment(weekOf).format('MMM Do')
console.log(doc);
history.push({
title: weekOfFormat,
data: [{
key: doc.id,
date: doc.data().date,
displayName: doc.data().displayName,
hours: doc.data().hours,
image: doc.data().image,
}]
});
});
that.setState({
history,
loading: false,
});
}

Answer 1

I think your misunderstanding is, that SectionList does not need an array of items. It needs an array of sections, where each section has an array of items (data).
Your code should look something like this:
onCollectionUpdate = (querySnapshot) => {
// make copy of history object
let history = JSON.stringify(JSON.parse(this.state.history);
querySnapshot.forEach((doc) => {
// find last sunday
let now = new Date(doc.data().date);
let today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
let lastSunday = new Date(today.setDate(today.getDate()-today.getDay()));
let lastSundayString = convertDateToMyStringFormat(lastSunday);
// check if section with this date as section title exists and push to that data if so
let sectionExists = false;
for(let i = 0; i < history.length; i++;) {
if(history[i].title === lastSundayString){
sectionExists = true;
history[i].data.push({
key: doc.id,
date: doc.data().date,
displayName: doc.data().displayName,
hours: doc.data().hours,
image: doc.data().image,
});
break;
}
}
// add new section if no such section found
if(!sectionExists){
history.push({
title: lastSundayString,
data: [{
key: doc.id,
date: doc.data().date,
displayName: doc.data().displayName,
hours: doc.data().hours,
image: doc.data().image,
}]
});
}
});
this.setState({
history,
loading: false,
});
}
You will have to implement your own convertDateToMyStringFormat function, to get a title string out of your Javascript Date object.