title: How to display state in FlatList ReactNative/React?
body: <p>I have record state in my react native app.</p>
  <pre><code>state{
      record:[] //some data inside, When i console my state it looks like this:
  }
  </code></pre>
  <p>Console output of my record state:</p>
  <pre><code>Array [
    Object {
      &quot;name&quot;: &quot;abc&quot;,
      &quot;age&quot;: 23,
      },
  ]
  Array[
   Object {
      &quot;name&quot;: &quot;xyz&quot;,
      &quot;age&quot;: 27,
      },
  ]
  </code></pre>
  <p>When i render it through FlatList it shows only first item of array that is name abc and age 23. While it should also load 2 array item in state, which is name xyz and age 27. below is the code for output of state.</p>
  <pre><code>displaydata(){
          firebase.firestore()
              .collection('users').where('age', '&gt;=', 21)
              .get()
              .then(querySnapshot =&gt; {
  
                  querySnapshot.forEach(documentSnapshot =&gt; {
                      const urecords = [];
                      const udata = documentSnapshot.data();
                      urecords.push(udata);
                     
                      this.setState({ record: [...urecords] })
  
                  });
              });
      }
  }
  render(){
      return(
      &lt;View style={{ flex: 1 }}&gt;
      {this.state.record ? (
      &lt;&gt;
      &lt;Text&gt;Data from firebase firestore&lt;/Text&gt;
            &lt;FlatList
                   style={{ flex: 1 }}
                   data={this.state.record}
                   keyExtractor={(key, index) =&gt; key + index}
                   renderItem={(itemData) =&gt; {
  
                       console.log(this.state.record); // it displays all data of state in console as i have consoled above
                       return &lt;Text&gt;{itemData.item.name}{itemData.item.age}&lt;/Text&gt;; // it displays first array data(item) only, which is abc and 23
  
                    }
                 }
            /&gt;
      &lt;/&gt;
         ) : (
        &lt;View style={{ flex: 1, justifyContent: &quot;center&quot;, alignItems: &quot;center&quot; }}&gt;
           &lt;ActivityIndicator size=&quot;large&quot; color=&quot;black&quot; /&gt;
        &lt;/View&gt;
       )}
      &lt;/View&gt;
      );
  
   }
  </code></pre>
  <p>I want to load complete state on my screen.</p>