Flatlist inside Flatlist : get data from the parent Flatlist - react-native

Question

Im rendering multiple slides and each slide have a list of items.
so I had to render a Flatlist inside Flatlist like this:
<FlatList
ref={(list) => this.ref= list}
data={this.state.buttons} // parent data
keyExtractor={(item) => item.id.toString()}
...
getItemLayout={(data, index)=> (
{
length: wp('100%'),
offset: wp('100%') * index,
index,
borderWidth: 1, borderColor: 'red',
}
)}
showsHorizontalScrollIndicator={false}
renderItem={({item}) => {
let parentData = item;
let myData = this.state.listGifts + '.' + parentData.name;
console.warn('data ', parentData, item);
return (
<View style={{width: wp('100%')}}>
{
this.state.isLoading ?
<ActivityIndicator size='large' style={Styles.styleAI} color={Colors.mainYellow}/>
:
<FlatList
contentContainerStyle={Styles.flatContent}
data={myData}
// keyExtractor={(item) => item.id.toString()}
renderItem={this.renderItem}
removeClippedSubviews={true}
extraData={this.state}
/>
}
</View>
)
}
}
extraData={this.state}
/>
I fetch two JSON :
this.state.buttons >
{
"message": "",
"success": true,
"Category": [
{
"id": 2,
"name": "Peinture"
},
{
"id": 3,
"name": "Cuisine"
},
{
"id": 4,
"name": "Outils"
},
{
"id": 5,
"name": "Electromenager"
}
]
}
this.state.giftsList >
{
"message": "OK",
"success": true,
"Peinture": [
{
"idCadeau": 2,
"Cadeau": "Cadeau1",
"Unites": "100",
},
{
"idCadeau": 3,
"Cadeau": "Cadeau2",
"Unites": "1000",
},
{
"idCadeau": 4,
"Cadeau": "Cadeau3",
"Unites": "50",
}
],
"Cuisine": [
{
"idCadeau": 5,
"Cadeau": "Cadeau4",
"Unites": "200",
},
{
"idCadeau": 6,
"Cadeau": "Cadeau5",
"Unites": "2500",
}
],
"Outils": [
{
"idCadeau": 7,
"Cadeau": "Cadeau6",
"Unites": "100",
}
],
"Electromenager": [
{
"idCadeau": 9,
"Cadeau": "Cadeau7",
"Unites": "500",
}
]
}
for the second Flatlist (the child), I try to get data like this (see code below) :
let myData = this.state.listGifts + '.' + parentData.name;
...
data={myData}
but it doesn't work ! I comment this // keyExtractor={(item) => item.idCadeau.toString()} because it give an error and then it give me an empty list .
**
what I want is set data like this :
**
data={this.state.listGifts.Peinture}
data={this.state.listGifts.Cuisine}
data={this.state.listGifts.Outils}
...

Answer 1

If this.state.listGifts is an object then I believe you mean to do something like this:
let myData = this.state.listGifts[parentData.name];