How to render SectionList Header?

Question

How do I render Object Key as a SectionList Header? So that I can make Section based on Today's Yesterday. Below I have provided the Object where Object is group by date with the help of Lodash and date is formatted using moment

Code Link : Snack expo

Object :

{
    "18-Apr-2021": [
        {
            "id": 1,
            "title": "Spotify Premium",
            "amount": -9.99,
            "payType": "Subscription",
            "time": "5:22 PM",
            "date": "2021-04-18T08:38:00.889Z"
        },
        {
            "id": 2,
            "title": "Starbucks",
            "amount": -32,
            "payType": "Food",
            "time": "3:34 PM",
            "date": "2021-04-18T08:38:00.889Z"
        }
    ],
    "04-Oct-2021": [
        {
            "id": 4,
            "title": "TopUp",
            "amount": 1500,
            "payType": "Income",
            "time": "Ready to use",
            "date": "10-4-2021"
        },
        {
            "id": 5,
            "title": "Loving Hut Vegan",
            "amount": -32,
            "payType": "out Expenses",
            "time": "10:47 AM",
            "date": "10-4-2021"
        },
        {
            "id": 6,
            "title": "Market",
            "amount": -138.74,
            "payType": "Daily Shopping",
            "time": "10:47 AM",
            "date": "10-4-2021"
        }
    ],
    "04-Aug-2021": [
        {
            "id": 7,
            "title": "Grocery Market",
            "amount": -138.74,
            "payType": "Daily Shopping",
            "time": "10:47 AM",
            "date": "08-04-2021"
        }
    ]
}

I have used moment and lodash to format the data

Code I tried :

import _ from 'lodash';
import * as React from 'react';
import { Text, View, StyleSheet,SectionList } from 'react-native';
import moment from 'moment';
import Constants from 'expo-constants';
import List from './List'
import {statementHistory} from './data'


export default function App() {
  let group = _.groupBy(statementHistory, e => moment(e.date).format("DD-MMM-YYYY"))
  return (
    <View>
    <SectionList  
                    sections={group}  
                    renderItem={(item) => <List item={item}/>}  
                    renderSectionHeader={(section) => console.log("section",section)}  
                    keyExtractor={(item, index) => index}  
                /> 
    </View>
  );
}

Answer 1

You are using the wrong data for the section list. section list required an array of objects having the title as header and data array as lists.

[ {
  title:"Header",
  data:["Data1","data3"]
 }, 
 { ... }, { ... } ]

for your data set, you need to modify the data as

...
let group = _.groupBy(statementHistory, e => moment(e.date).format("DD-MMM-YYYY"))
// modify dataset of section List
group = Object.keys(group).map((item) => {
  return {
    title: item,
    data: group[item],
  };
});
console.log(group);
...

you can refer here: https://reactnative.dev/docs/sectionlist