title: Update Listview which contains Row and Section
body: <p>I have 2 components which are CalendarList and CalendarListItem. I use Listview to displays 10 records in CalendarListItem at the first load and it will add more 10 records when user scroll down. </p>
  
  <p>I meet trouble when try to update Listview containing Row and Section to append next 10 records when user scroll down to the end of list. I have searched and applied hints but most of questions relating with rows only that not work for me. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>constructor(props) {
          super(props);
          this.ds = new ListView.DataSource({
                       rowHasChanged: (r1, r2) =&gt; r1 !== r2,
                       sectionHeaderHasChanged: (s1, s2) =&gt; s1 !== s2,
                  }); 
          this.state = {
                  eventData: [],
                  eventDatas: [],
                  dataBlob: {},
                  dataSource: {},
                  dataBlog: [],
                  refreshing: false,
                  page: 1
          };
      }
  
      componentWillMount() {
            this.loadEventData(); 
      }
      componentDidMount() {
          this.loadEventData();
      }
  
  loadEventData() {
      eventState = this.props.eventtop;
  
  
      console.log('NEW DATA', eventState);
  
          const tempDataBlob = this.state.dataBlob;
  
             this.state.eventData = this.props.eventtop;
  
              this.state.eventData.forEach(item =&gt; {
                  const event = item;
                  const date = new Date(item.EventDate);
                  const group = dateFormat(date, 'mmmm yyyy');
                  if (currentGroup !== group) {
                      currentGroup = group;
                      currentIndex++;
                      this.state.eventDatas.push({ divider: currentGroup, data: [] });     
                  }
                 this.state.eventDatas[currentIndex].data.push(event); 
                 tempDataBlob[this.state.eventDatas[currentIndex].divider] = this.state.eventDatas[currentIndex].data;
                 this.setState({
                     dataBlob: tempDataBlob
                 });
              });
  
          this.setState({
              dataSource: this.ds.cloneWithRowsAndSections(this.state.dataBlob)
          });
          console.log('FUCKING DATA', this.state.dataBlob);
      }
  
  
  renderRow(rowData) {
          return (               
                    &lt;TouchableOpacity 
                      onPress={() =&gt; {
                          if (window.width &lt;= 600) {
                               Actions.calendarDetail({ eventtop: rowData });
                          } else if (window.width &gt; 600) {      
                                  this.props.getEventd(rowData);
                                this.passState.bind(this.props.eventItems);
                          }
                               }}
                      &gt;
                          &lt;View&gt;
                              &lt;Text style={styles.evenType}&gt;
                                   {rowData.EventType}
                               &lt;/Text&gt;
                               &lt;Text style={{ ...styles.contentStyle, ...styles.contenStyle2 }}&gt;
                                  {dateFormat(rowData.EventDate, 'mm/dd/yyyy')}
                               &lt;/Text&gt;
                               &lt;Icon
                                  name='chevron-thin-right'
                                  style={styles.iconStyle}
                               /&gt;
                               &lt;View 
                                  style={styles.titleStyle}
                               &gt;
                                  &lt;Text style={styles.contentStyle}&gt;  
                                  {rowData.Title}
                               &lt;/Text&gt;
                               &lt;/View&gt;                          
                           &lt;/View&gt;                 
                      &lt;/TouchableOpacity&gt;    
          );
  }
  renderSectionHeader(sectionData, sectionId) {
      return (
          &lt;View&gt;
              &lt;Text style={styles.timeStyle}&gt;
                        {sectionId}
              &lt;/Text&gt;
          &lt;/View&gt;
      );
  }
  
      render() {
          return (
                  &lt;ListView
                      style={{ flex: 1 }}
                      enableEmptySections
                      dataSource={this.state.dataSource}
                      renderRow={data =&gt; this.renderRow(data)}
                      renderSectionHeader={this.renderSectionHeader}
                      onEndReached={this.props.onEndReached}
                      renderFooter={this.props.renderFooter}
                      onEndReachedThreshold={30}
                  /&gt;
  
  
          );
      }
  </code></pre>