Display nested array into a Flat list in react native - 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

You can display the data using destructuring assignment like the one you use in your code.
Eg:
const { name, groups } = item;
const { fields } = item.groups;
keyExtractor assign a unique key value to your render items. In your case, it assign a name value (from your this.props.people) to each items in your Flatlist.
As you know, all react children needs a unique key or you will get this warning
Warning: Each child in a list should have a unique "key" prop

Answer 2

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.