Display nested array into a Flat list in react native

Question

I am a newbie in RN and recently started using redux. I have a api response which is of the below format:

    {
    records : [
              {
               name : "cde"
               groups :[
                      {
                       id : "212"
                       fields[{
                              data : "abc"
                              }]

                    }]
              }

    ]

}

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 :

export default class PeopleList extends Component {
  _keyExtractor = item => name;

  _renderItem = ({ item }) => {




       const { name} = item;
    const groups =  this.props.people.map((items, index)=>{
   return( <Text>{name}({items.id})</Text>)
    })



      //const {} = item.groups;


        return (
          <View>
            <View style={styles.cardContainerStyle}>
              <View style={{ paddingRight: 5 }}>

                <Text style={styles.cardTextStyle}>

               {/* {name} {"\n"} */}
                {groups}

                </Text>

              </View>
              <Image
                style={styles.faceImageStyle}
              //  source={{ uri: picture.medium }}
              />
            </View>
          </View>
        );
      };


          render() {
            return (
              <FlatList
                style={{ flex: 1 }}
                data={this.props.people}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
                showsVerticalScrollIndicator={false}
                showsHorizontalScrollIndicator={false}
              />
            );
          }
        }

    PeopleList.propTypes = {
      people: PropTypes.array
    };

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?

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

Edit : I have modified my code and used map func, now the output that I get is:

name1 groupid1 groupid2 ... so on
name2 groupid1 groupid2 ... so on
.
.
. and so on 

where as I want :

   name1 groupid1
   name2 groupid2
   .
   .
   .

Answer 1

The below code needs to be added

   if(item.groups){
       groupList =  item.groups.map((unit, key)=>{
        return (<View key="key">
    <Text>{unit.id}</Text>
    { unit.fields.map((unit1, key1)=>{
       return <Text key={key1}>{unit1.name}</Text>
    })
      }

and later we need to display groupList

return (
          <View>
            <View style={styles.cardContainerStyle}>
              <View style={{ paddingRight: 5 }}>

                <Text style={styles.cardTextStyle}>

               {/* {name} {"\n"} */}
                {groupList}

                </Text>

              </View>
              <Image
                style={styles.faceImageStyle}
              //  source={{ uri: picture.medium }}
              />
            </View>
          </View>
        );

The above snippet will display data inside fields.