ReactNative FlatList nested inside FlatList

Question

I want to do something like this:

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>
    />

Answer 1

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>)} 
  />)
}