How to Stop Multiple Repeating of FlatList in SectionList using React Native

Issue

I am using FlatList inside SectionList, but my row is repeating Multiple Times. I have stored Data in TWO States and Fetching its value in SectionList and FlatList with condition. Please Help me. Thank You.

    <SectionList
                  ItemSeparatorComponent={FlatListItemSeparator}
                  sections={[
                    { title: 'Dishes', data: cates },
                    { title: 'Restaurants', data: users },
                  ]}
                  renderSectionHeader={({ section }) => (
                    <Text style={{ fontWeight: 'bold', color: '#dc3545', fontSize: 20, paddingVertical: 5 }}>
                      {section.title}
                    </Text>
                  )}
                  renderItem={({ item }) => (
                    // Item for the FlatListItems
                    <View>
                      {
                        item.catIcon ?
                          <FlatList
                            data={cates}
                            style={{ backgroundColor: '#fff', paddingTop: 5, borderRadius: 6, paddingBottom: 10 }}
                            numColumns={4}
                            renderItem={({ item }) => (
                                <Text>{item.catName}</Text>
                            )}
                          />
                          :
<Text>{item.RName}</Text>
                      }
                    </View>
                  )}
                  keyExtractor={(item, index) => index}
                />

Solution

In your flatList you are using the wrong data, you are giving for each section the same array when it should be dependent on the section, try with this:

                  renderItem={({ item }) => (
                    // Item for the FlatListItems
                    <View>
                      {
                        item.catIcon ?
                          <FlatList
                            data={item.data} // <---- CHANGE THIS ROW
                            style={{ backgroundColor: '#fff', paddingTop: 5, borderRadius: 6, paddingBottom: 10 }}
                            numColumns={4}
                            renderItem={({ item }) => (
                                <Text>{item.catName}</Text>
                            )}
                          />
                          :
                       <Text>{item.RName}</Text>
                      }
                    </View>
                  )}

Answered By - Francesco Clementi