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