Blog

Horizontal flatlist inside a vertical flatlist and want data on the inside flatlist to be provided based on which item of the outer flatlist is being rendered

  <FlatList
    style={styles.outerFlatlist}
    data={this.state.catagories}

    renderItem={({item, index})=>{
return (
  <View>
    <View>
      <Text style={styles.catagoryName}>
        {item.CategoryName}
        </Text>
    </View>
    <View style={styles.innerFlatlist}>
      <FlatList
      horizontal={true} 
      data={this.state.product1}
      renderItem={({item, index})=>{
          return (
          <View 
          style={styles.productsContainer}>
            <View
            style={styles.productImage}>
             <Image 
             source={{uri:item.productImage}}
             style={styles.image}
             resizeMode='contain'>
            </Image>
          </View>
          <View style={styles.productDETAILS}>
            <Text 
            style={styles.productPrice}>R{item.productPrice}
            </Text>
            <Text 
            style={styles.productDescription}> 
                 {item.productDecription}
            </Text>
          </View>
          </View>
          );
          }}/>
        </View>
    </View>
);
}}/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Except that each category displays the same data how can make the data of the inner flatlist be dependant on the which item on the outer flatlist is displayed

Map you already are inside the this. state. categories , but since you always use this.state.product1 for the flatlist2 you will always get the same result because this. state.

At flatlist2 change the data to item.products or item.whateverYouNeedHereButArray

<View style={styles.innerFlatlist}>
      <FlatList
      horizontal={true} 
      data={item}