title: Cannot read property 'length' of undefined when using SectionList
body: <p>I call an api to get my <code>movieData</code> API: <a href="https://obscure-reaches-65656.herokuapp.com/api/getCloseTime?city=Hsinchu&amp;sTime=18&amp;eTime=21" rel="nofollow noreferrer">https://obscure-reaches-65656.herokuapp.com/api/getCloseTime?city=Hsinchu&amp;sTime=18&amp;eTime=21</a></p>
  
  <p>I think the data is correct for <code>SectionList</code>, the data is an array with lots of object, but i still get the error: </p>
  
  <p><code>Cannot read property 'length' of undefined</code></p>
  
  <p>Can't figure it out how to fix the data problem ?</p>
  
  <p>Here is <code>console.log(movieData);</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/PX4o2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PX4o2.png" alt="enter image description here"></a></p>
  
  <p>Here is about my class component render:</p>
  
  <pre><code>render() {
      const movieData = this.props.searchTime;
  
      if (this.props.loading) {
        return &lt;Spinner text='Loading...' /&gt;;
      }
      console.log('movieData =&gt;');
      console.log(movieData);
  
      return (
        &lt;View&gt;
          &lt;SectionList
            renderSectionHeader={this.sectionComp}
            renderItem={this.renderSectionItem}
            sections={movieData}
            ItemSeparatorComponent={() =&gt; &lt;View&gt;&lt;Text&gt;&lt;/Text&gt;&lt;/View&gt;}
            ListHeaderComponent={() =&gt; &lt;View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}&gt;&lt;Text style={{ fontSize: 18, color: '#ffffff' }}&gt;Header&lt;/Text&gt;&lt;/View&gt;}
            ListFooterComponent={() =&gt; &lt;View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}&gt;&lt;Text style={{ fontSize: 18, color: '#ffffff' }}&gt;Footer&lt;/Text&gt;&lt;/View&gt;}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>If i set a test data <code>testSections</code> instead of <code>movieData</code> its working.</p>
  
  <pre><code>const testSections = [
    { key: "A", data: [{ title: "test1-1" }, { title: "test1-2" }, { title: "test1-3" }] },
    { key: "B", data: [{ title: "test2-1" }, { title: "test2-2" }, { title: "test2-3" }, { title: "test2-4" }, { title: "test2-5" }] },
    { key: "C", data: [{ title: "test3-2" }, { title: "test3-2" }] },
    { key: "W", data: [{ title: "test4-1" }, { title: "test4-2" }, { title: "test4-3" },{ title: "test4-4" }, { title: "test4-5" }, { title: "4-6" }] },
  ];
  </code></pre>
  
  <p>My custom render function like this:</p>
  
  <pre><code>  renderSectionItem = (info) =&gt; {
      console.log('what is _renderItem info =&gt;');
      console.log(info);
      const txt = '  ' + info.item.theaterCn;
      return &lt;Text
        style={{ height: 60, textAlignVertical: 'center', backgroundColor: "#ffffff", color: '#5C5C5C', fontSize: 15 }}&gt;{txt}&lt;/Text&gt;
    }
  
    sectionComp = (info) =&gt; {
      console.log('what is  _sectionComp info =&gt;');
      console.log(info);
      const txt = info.section.key;
      return &lt;Text
        style={{ height: 50, textAlign: 'center', textAlignVertical: 'center', backgroundColor: '#9CEBBC', color: 'white', fontSize: 30 }}&gt;{txt}&lt;/Text&gt;
    }
  </code></pre>
  
  <p>I don't know why.</p>
  
  <p>Any help would be appreciated. Thanks in advance.</p>