title: React native section list not re-rendering when item changes
body: <p>I have a sectionList in my react native project. it does not re-render if item changes.
  My code:</p>
  
  <p>test.js</p>
  
  <pre><code>class Test extends React.Component {
  started = false;
  causeData=[];
  showLess=false;
  items = [];
  
  _start = () =&gt; {
      const { ws } = this.props;
  
      this.showLess = false;
      if (ws.causes.length) {
    this.causeData = {
      title: Language.causes,
      key: "cause",
      data: []
    };
  
    ws.causes.forEach(cause =&gt; {
      let causeDetails = {
        key: "cause_" + cause.id,
        name: "",
        value: cause.name,
        sortIndex: cause.sortIndex,
        progress: cause.progress
      };
      this.causeData.data.push(causeDetails);
  
      if (this.causeData.data.length &gt; 4) {
        this.causeData.data = this.causeData.data.slice(0, 4);
      }
    });
    this.items.push(this.causeData);
    console.log("causeData", this.causeData);
    }  
    }
    }
  
   _renderItem = ({ item }) =&gt; {
       return (
            &lt;View&gt;
            &lt;Text key={item.key} style={styles.text}&gt;{`${item.name}  ${
              item.value
            }`}&lt;/Text&gt;
          &lt;/View&gt;
    );
   };
  
  _renderSectionHeader = ({ section }) =&gt; {
     const { ws } = this.props;
     const showMore = ws.causes.length &gt; 0 &amp;&amp; !this.showLess;
  
    return (
      &lt;View style={styles.sectionHeader}&gt;
        &lt;Text key={section.key} style={styles.header}&gt;
          {section.title}
        &lt;/Text&gt;
        {showMore &amp;&amp; (
          &lt;Button
            onPress={this._afterCauseAnswered}
            title={Language.showMore}
            data={this.items}
            accessibilityLabel={Language.causeDoneAccessibility}
          /&gt;
        )}
        &lt;/View&gt;
      );
      };
  
     _keyExtractor = (item, index) =&gt; item.key;
  
    _afterCauseAnswered = () =&gt; {
  
      const { stepDone, ws } = this.props;
      this.causeData.data = { ...ws.causes };
  
      stepDone("showMoreAnswered");
      this.showLess = true;
    };
  
    render = () =&gt; {
    if (!this.started) {
    this.started = true;
    this._start();
    }
    return (
    &lt;View style={styles.container}&gt;
      &lt;SectionList
        sections={this.items}
        extraData={this.items}
        renderItem={this._renderItem}
        renderSectionHeader={this._renderSectionHeader}
        keyExtractor={this._keyExtractor}
      /&gt;
    &lt;/View&gt;
  );
  };
  }
  </code></pre>
  
  <p>in my section list section header contain a button called showMore. At initial rendering it will only show 5 items, while clicking showMore it should display all List. This is my functionality. but while clicking showMore button it will not show entire list only shows 5 items that means the sectionList does not getting re-render. How to resolve this? i am new to react native. Any idea what am I missing ? Any help would be greatly appreciated!</p>