title: Why is one array populated with data but the other isn't in the console: [ ] and [ {..} {..} ] given identical datasets?
body: <p>So I did an interesting test because my data is not populating in my <code>FlatList</code> React Native element. I made two state variables: <code>realList</code> and <code>fakeList</code>:</p>
  
  <pre><code>state = { 
      realList: [],
      fakeList: [],
  }
  </code></pre>
  
  <p>Then in <code>componentWillMount</code>, the following function is run which populates two arrays called <code>real</code> and <code>fake</code>. One with data pulled from Firebase, the other hardcoded with the SAME array information:</p>
  
  <pre><code>listenForMusic = () =&gt; {
          var dataRef = database.ref("music");
          let real = [];
          let fake = [];
          dataRef.orderByChild("date").on('child_added', (snap) =&gt; {
              var url = snap.val().youtubeURL;
              var vidTitle = snap.val().title;
              var thumb = snap.val().thumbnail;
              real.push({
                  videoURL: url,
                  title: vidTitle,
                  thumbnail: thumb
              });
          });
          fake.push({videoURL: "https://youtu.be/AHukwv_VX9A", title: "MISSIO - Everybody Gets High (Audio)", thumbnail: "https://i.ytimg.com/vi/AHukwv_VX9A/hqdefault.jpg"}, {videoURL: "https://youtu.be/G-yWpz0xkWY", title: "SMNM - Million ft. Compulsive", thumbnail: "https://i.ytimg.com/vi/G-yWpz0xkWY/hqdefault.jpg"});
          this.setState({ 
              realList: real,
              fakeList: fake
          });
      }
  </code></pre>
  
  <p>Then I <code>console.log</code> both of the arrays after the render function:</p>
  
  <pre><code>render() {
          console.log("Actual", this.state.realList);
          console.log("Fake", this.state.fakeList);
          return (
              &lt;View&gt;
                  &lt;FlatList
                      data={this.state.fakeList}
                      renderItem={({item}) =&gt; &lt;Text&gt;{item.videoURL}&lt;/Text&gt;}
                  /&gt;
              &lt;/View&gt;
          );
      }
  </code></pre>
  
  <p>and I see this:</p>
  
  <p><a href="https://i.stack.imgur.com/QM2NI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QM2NI.png" alt="enter image description here"></a></p>
  
  <p>And opening both:</p>
  
  <p><a href="https://i.stack.imgur.com/1a3Jb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1a3Jb.png" alt="enter image description here"></a></p>
  
  <p>So my question is, why does the "real" array look empty but still has data populated inside while the "fake" array displays that it holds two objects inside of it, even before we take a look inside??</p>
  
  <p>In my FlatList, if I use my fakeList of data, I can display the data on screen, but if I use my realList, nothing shows up on my screen.</p>
  
  <p>EDIT: Added full code for reference:</p>
  
  <pre><code>class VideoFeed extends React.Component {
      state = { 
          itemList: [],
      }
  
      componentDidMount() {
          this.listenForMusic(); 
      }
  
      listenForMusic = () =&gt; {
          var dataRef = database.ref("music");
          let items = [];
          dataRef.orderByChild("date").on('child_added', (snap) =&gt; {
              items.push({
                  videoURL: snap.val().youtubeURL,
                  title: snap.val().title,
                  thumbnail: snap.val().thumbnail
              });
          });
          this.setState({ itemList: items })
      }
  
      _renderVideoItem = ({item}) =&gt; (
              &lt;TouchableWithoutFeedback
                  onPress={Actions.Submit}
              &gt;
                  &lt;View style={styles.mediaContainer}&gt;
                      &lt;Image 
                          source={{uri: item.thumbnail }}
                          style={styles.mediaThumbnail}
                      /&gt;
                      &lt;View style={styles.mediaMetaContainer}&gt;
                          &lt;View style={styles.topMetaContainer}&gt;
                              &lt;Text style={styles.mediaTitle}&gt;
                                  {item.title}
                              &lt;/Text&gt;
                              &lt;Text style={styles.sharedByUser}&gt;
                              UNCVRD
                              &lt;/Text&gt;
                          &lt;/View&gt;
                          &lt;View style={styles.bottomMetaContainer}&gt;
                              &lt;Icon
                                  name='youtube-play'
                                  type='material-community'
                                  color='#ff0000'
                                  size={16}
                              /&gt;
                              &lt;View style={styles.bottomRightContainer}&gt;
                                  &lt;Icon
                                      name='thumb-up'
                                      size={12}
                                      color='#aaa'
                                  /&gt;
                                  &lt;Text style={styles.metaLikeCounter}&gt;
                                      16
                                  &lt;/Text&gt;
                              &lt;/View&gt;
                          &lt;/View&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
          &lt;/TouchableWithoutFeedback&gt;
      );
  
      render() {
          console.log(this.state.itemList); // this list is populated
          return (
              &lt;View&gt;
                  &lt;FlatList
                      data={this.state.itemList}
                      renderItem={({item}) =&gt; {
                          console.log('item in render --&gt; ', item); return (&lt;Text&gt;{item.videoURL}&lt;/Text&gt;) }}
                  /&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>