React Native : Error in the data part of Flatlist - reactjs

Question

I tried using Flatlist in order to respond to one of my issue but I got an error on the data= of my Flatlist . I don't rreally undersstand the issue and the error message is not helping ( No overload matches this call. Overload 1 of 2, '(props: FlatListProps<any> | Readonly<FlatListProps<any>>): FlatList<any>', gave the following error. Type '{ id: string; name: string; data: string[]; description: string[]; }' is missing the following properties from type 'readonly any[]': length, concat, join, slice, and 19 more. )
I used flatlist because of this : React Native : Conditional Views.
Here is my code:
<View style={{ flex: 10}}>
{letter.map((letter) => {
const isleetergotdata = letter.data?.length > 0;
if (!isleetergotdata) {
return null;
}
return (
<View
style={{
flex: 1,
flexDirection: "row",
}}
>
<div
ref={fieldRef}
style={{
marginBottom: 100,
}}
>
<Text
style={{
fontSize: 90,
}}
>
{letter.name}
</Text>
</div>
{letter.data?.map((item, index) => {
if (total !== same) {
return (
<FlatList
data={letter} // HERE IS THE ISSUE
numColumns={2}
keyExtractor={(_, index) => index.toString()}
renderItem={({ item }) => {
return (
<View>
<Text>{letter.description[index]}</Text>
</View>
);
}}
/>
);
}
})}
</View>
);
})}
</View>
And here is my data:
const letter = [
{
id: "1",
name: "A",
data: ["Abricot", "Abricot", "Abricot"],
description: [
"Un abricot est un fruit",
"Un abricot est un fruit",
"Un abricot est un fruit",
],
},
//...
{
id: "5",
name: "E",
data: [],
description: [],
},
//...
];

Answer 1

The problem here is that you are providing letter to the FlatList's data prop, but this is not the global letter variable but the one of the local scope of the outer map function. You have given them the same name. Thus, letter in the map function is an object and not an array.
It seems to me that you want to create a FlatList for each object inside the "global" letter variable and provide the description property of each of these objects (which is an array and you are acessing it via the index which is really not necessary).
Thus, you actually only need to use one map and remove the inner map function. I would also rename the local variable letter to something else.
<View style={{ flex: 10}}>
{letter.map((datum) => {
const isleetergotdata = datum.data?.length > 0;
if (!isleetergotdata) {
return null;
}
return (
<View
style={{
flex: 1,
flexDirection: "row",
}}
>
<div
ref={fieldRef}
style={{
marginBottom: 100,
}}
>
<Text
style={{
fontSize: 90,
}}
>
{datum.name}
</Text>
</div>
if (total !== same) {
return (
<FlatList
data={datum.description}
numColumns={2}
keyExtractor={(_, index) => index.toString()}
renderItem={({ item }) => {
return (
<View>
<Text>{item}</Text>
</View>
);
}}
/>
);
}
)
}
</View>
);
})}
</View>
And to be precise here, remove the letter.data?.map((item, index) part completely.
If you need both data and desription in the same FlatList, then you can still leave the inner map function.
<FlatList
data={datum.data}
numColumns={2}
keyExtractor={(_, index) => index.toString()}
renderItem={({ item, index }) => {
return (
<View>
<Text>{datum.description[index]}</Text>
</View>
);
}}
/>

Answer 2

You can get the data from array.
Step:01 Inside API call.
jsonElement["Letter"]
Step:02
const [dataSource, setDataSource] = useState([]);
Step:03
<FlatList horizontal={true} data={dataSource} />
Step:04
{item.id}
₹ {item.name}

Answer 3

When I run your code I face a different error related to the div tag. React-Native has no dom and if you do not have a custom 'div' component, you can not use the div tag. Even if a 'Div' component is in your project, component names should start with a capital letter.