title: Display nested array into a Flat list in react native
body: <p>I am a newbie in RN and recently started using redux. I have a api response which is of the below format:</p>
  
  <pre><code>    {
      records : [
                {
                 name : "cde"
                 groups :[
                        {
                         id : "212"
                         fields[{
                                data : "abc"
                                }]
  
                      }]
                }
  
      ]
  
  }
  </code></pre>
  
  <p>So, Inside records , I have an array of objects "groups" and inside "groups" I have array of objects "fields" and inside fields, I have data which I want to display inside FlatList. I am able to display "name" which is inside records inside FlatList As of now. 
  My File PeopleList.js looks like below : </p>
  
  <pre><code>export default class PeopleList extends Component {
    _keyExtractor = item =&gt; name;
  
    _renderItem = ({ item }) =&gt; {
  
  
  
  
         const { name} = item;
      const groups =  this.props.people.map((items, index)=&gt;{
     return( &lt;Text&gt;{name}({items.id})&lt;/Text&gt;)
      })
  
  
  
        //const {} = item.groups;
  
  
          return (
            &lt;View&gt;
              &lt;View style={styles.cardContainerStyle}&gt;
                &lt;View style={{ paddingRight: 5 }}&gt;
  
                  &lt;Text style={styles.cardTextStyle}&gt;
  
                 {/* {name} {"\n"} */}
                  {groups}
  
                  &lt;/Text&gt;
  
                &lt;/View&gt;
                &lt;Image
                  style={styles.faceImageStyle}
                //  source={{ uri: picture.medium }}
                /&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          );
        };
  
  
            render() {
              return (
                &lt;FlatList
                  style={{ flex: 1 }}
                  data={this.props.people}
                  keyExtractor={this._keyExtractor}
                  renderItem={this._renderItem}
                  showsVerticalScrollIndicator={false}
                  showsHorizontalScrollIndicator={false}
                /&gt;
              );
            }
          }
  
      PeopleList.propTypes = {
        people: PropTypes.array
      };
  </code></pre>
  
  <p>people is an array that contains the records object :  responseJson.records
  So, how can I display data and also what is the use of keyextractor?</p>
  
  <p>As per what I have searched so far is that we need to use map function for arrays but not quite sure how to use it here</p>
  
  <p>Edit : I have modified my code and used map func, now the output that I get is:</p>
  
  <pre><code>name1 groupid1 groupid2 ... so on
  name2 groupid1 groupid2 ... so on
  .
  .
  . and so on 
  </code></pre>
  
  <p>where as I want :</p>
  
  <pre><code>   name1 groupid1
     name2 groupid2
     .
     .
     .
  </code></pre>