React Native : Error in the data part of Flatlist

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}