Flatlist inside Flatlist : get data from the parent Flatlist

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];