title: How do you group a list of transactions by the date they're created in react native?
body: <p>I have a JSON list of test transactions and I'm able to display them with the dates they were performed but I would like to be able to group these so that for instance all transactions that were performed today are listed under one banner that says 'Today' and other transactions that were performed on same dates fall under a banner displaying that date. I've tried to think of ways to implement this but am struggling, any help would be appreciated. </p>
  
  <p>Below is the component I'm trying to create this function within.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import {
    Text,
    SafeAreaView,
    StatusBar,
    ActivityIndicator,
    FlatList,
    View,
    List,
    Image,
    SectionList,
  } from 'react-native';
  import moment from 'moment';
  import transactions from '../testdata/transactions.json';
  import Icon from 'react-native-ionicons'
  
  var datetest = [moment(transactions[0].addedtime).calendar()];
   
  moment.locale('en-uk', {
    calendar: {
      lastDay: '[Yesterday ]',
      sameDay: '[Today]',
      nextDay: '[Tomorrow]',
      lastWeek: 'L',
      nextWeek: 'dddd',
      sameElse: 'L',
    },
  });
  
  class TransactionsComponent extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        isLoading: true,
        dataSource: [],
        epochDate: [],
      };
    }
  
    componentDidMount() {
      this.setState({
        isLoading: false,
        dataSource: transactions,
        epochDate: datetest,
      });
    }
  
    
    renderSeparator = () =&gt; {
      return (
        &lt;View
          style={{
            height: 0,
            width: '100%',
            backgroundColor: '#F5F5F5 ',
            marginLeft: '0%',
          }}
        /&gt;
      );
    };
    
  
    render() {
      if (this.state.isLoading) {
        return (
          &lt;View style={{flex: 1, padding: 20}}&gt;
            &lt;ActivityIndicator /&gt;
          &lt;/View&gt;
        );
      }
    }
  
  
   
  
    render() {
      return (
        &lt;View style={{width: '100%'}}&gt;
          &lt;FlatList
            data={this.state.dataSource}
            renderItem={({item}) =&gt; (
              &lt;View
                style={{
                  flex: 1,
                  flexDirection: 'column',
                  borderBottomColor: '#5AA8C8',
                  borderBottomWidth: 1,
                  paddingBottom: 10,
                }}&gt;
  
                
                { &lt;View style={{marginLeft: '3%'}}&gt;
                  &lt;Text style={{fontWeight: 'bold', fontSize: 18}}&gt;
                    {moment(item.addedtime).calendar()}
                  &lt;/Text&gt;
                &lt;/View&gt; }
                &lt;View style={{marginLeft: '5%', flexDirection: 'row', flex: 2,}}&gt;
                  &lt;View
                    style={{flexDirection: 'row', alignItems: 'center', flex: 3}}&gt;
                    &lt;Image
                      style={{width: 40, height: 40}}
                      source={{uri: item.iconblob}}
                    /&gt;
                  
                    &lt;Text
                      style={{fontSize: 16, color: 'grey', fontWeight: 'bold'}}&gt;
                      {'  '}
                      {item.merchantname}
                    &lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View
                    style={{
                      flex: 1,
                      flexDirection: 'row',
                      alignItems: 'center',
                      justifyContent: 'flex-end',
                      marginRight: '3%',
                    }}&gt;
                    &lt;Text style={{fontSize: 18, color: 'black'}}&gt;
                      &lt;Text style={{fontSize: 12, color: 'grey'}}&gt;CHF&lt;/Text&gt;
                      {parseFloat(item.billingamountauthorised / 100).toFixed(2)}
                     
                    &lt;/Text&gt;
                    &lt;View style= {{flex :6, flexDirection:"row", justifyContent:"flex-end"}}&gt;
                      &lt;Icon name="arrow-dropright" color="#5AA8C8" /&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
              &lt;/View&gt;
            )}
            keyExtractor={item =&gt; item.uniqueref}
            //containerStyle={{borderBottomWidth: 0}}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  export default TransactionsComponent;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is an example of how the JSON looks with addedtime being the epoch date the transaction was created</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>[   
      {
      "billingamountauthorised": "1",
      "iconblob": "https://is1-ssl.mzstatic.com/image/thumb/Purple114/v4/cb/cf/bb/cbcfbb61-4d03-4f4e-ecf7-b7582688435f/source/512x512bb.jpg",
      "merchantname": "K Kiosk Sihlquai",
      "merchantstreet": "Sihlquai",
      "addedtime": 1576590342000,
      "uniqueref": "A446806878486B5B"
  },
  {
      "billingamountauthorised": "750",
      "iconblob": "https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1024px-Starbucks_Corporation_Logo_2011.svg.png",
      "merchantname": "Starbucks",
      "merchantstreet": "Rue du Mont-Blanc",
      "addedtime": 1576590342000,
      "uniqueref": "D0868EB65DC2DE585"
  },
      {
          "billingamountauthorised": "1",
          "iconblob": "https://is1-ssl.mzstatic.com/image/thumb/Purple114/v4/cb/cf/bb/cbcfbb61-4d03-4f4e-ecf7-b7582688435f/source/512x512bb.jpg",
          "merchantname": "K Kiosk Sihlquai",
          "merchantstreet": "Sihlquai",
          "addedtime": 1576590342000,
          "uniqueref": "A446806878486B5B0"
      },
      {
          "billingamountauthorised": "100",
          "iconblob": "https://is1-ssl.mzstatic.com/image/thumb/Purple114/v4/cb/cf/bb/cbcfbb61-4d03-4f4e-ecf7-b7582688435f/source/512x512bb.jpg",
          "merchantname": "K Kiosk Sihlquai",
          "merchantstreet": "Sihlquai",
          "addedtime": 1575554709000,
          "uniqueref": "0D10B5F56A73D73DD"
          
      },
      {
          "billingamountauthorised": "1320",
          "iconblob": "https://pbs.twimg.com/profile_images/568401882444349441/KDWvUHCJ_400x400.jpeg",
          "merchantname": "Schweizerische Bundesbahnen",
          "merchantstreet": "Bahnhofplatz",
          "addedtime": 1575554709000,
          "uniqueref": "2F3D907B0FF675216"
      }
    ]</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is currently how it is the transactions are looking with each one displaying the date next to it regardless of if the date is the same as another transaction.</p>