ReactNative FlatList nested inside FlatList-CodePudding

I want to do something like this https://i.stack.imgur.com/SlbKX.png. If you need more information,please let me know! Hope someone can help me!

`const DATA=[[1,name1,...],[2,name2,...]...];// Data like [[...],[...],...]
<FlatList
    data={DATA}  
    keyExtractor={(outterItem)=>outterItem.key}
    renderItem={({outterItem})=>(                                                                          
    <View>
        <FlatList
              horizontal={true}
              data={outterItem}
              keyExtractor={(innerItem)=>innerItem.key}
              renderItem={({InnerItem})=>(  
                  <View style={styles.box}>
                      <Text style={styles.Text}>{InnerItem}</Text>
                   </View>
              )}   
         />
    </View>

  />



`

CodePudding user response：

You are destructuring the item parameter of the renderItem function of FlatList. You cannot rename it to innerItem or outerItem. The name must be item for both. Thre will be no conflict since the item parameter will be inside the local scope.

Here is a working version with a dummy data array.

export default function App() {
  const DATA=[[1,2,3],[2, 3, 4 ,5]];
  return (
  <FlatList
    data={DATA}  
    keyExtractor={(item, index)=>index.toString()}
    renderItem={({item})=>(                                                                          
    <View>
        <FlatList
              horizontal={true}
              data={item}
              keyExtractor={(item, index)=> index.toString()}
              renderItem={({item})=> (  
                  <View style={styles.box}>
                      <Text style={styles.Text}>{item}</Text>
                   </View>
              )}   
         />
    </View>)} 
  />)
}