How to use nested flatlist or sectionlist?

Question

I'm trying to create nested flatlist but an error occurres while rendering. I couldn't see any mistake. My array is like (contains semesters and lectures in that semester)

Array [
  Object {
    "semester": "1",
    "lectures": Array [
      Object {
        "grade": "BA",
        "id": 0,
        "lecture": "TÜRK DİLİ",
      },
      Object {
        "grade": "DC",
        "id": 2,
        "lecture": "FIZIKI",
      },
      Object {
        "grade": "AA",
        "id": 4,
        "lecture": "BİLGİSAYAR MÜHENDİSLİĞİNE GİRİŞ",
      },
      Object {
        "grade": "BB",
        "id": 6,
        "lecture": "MATEMATIKI Zorunlu сс 6 İNGİLİZCE",
      },
      Object {
        "grade": "DD",
        "id": 8,
        "lecture": "NESNEYE DAYALI PROGRAMLAMA",
      },
      Object {
        "grade": "AA",
        "id": 10,
        "lecture": "WEB TEKNOLOJİLERİ",
      },
    ],
  },
]

And my flatlist component:

<FlatList
    data={transcript}
    renderItem={({ item }) => (
      <View>
        <Text>{item.semester}</Text>
        <FlatList
          data={item.lectures}
          renderItem={({ item2 }) => (
            <View>
              <Text>{item2.lecture}</Text>
            </View>
          )}
          keyExtractor={(item2) => item2.id.toString()}
        />
      </View>
    )}
    keyExtractor={(item) => item.semester.toString()}
  />

Error that I get:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'item2.lecture')]

Anyway, <Text>HEY</Text> instead of <Text>{item2.lecture}</Text> works like expected.

When I use sectionlist like this

<SectionList
        sections={transcript}
        renderItem={({ item }) => <Text> {item.lecture}</Text>}
        renderSectionHeader={({ section }) => <Text>{section.semester}</Text>}
        keyExtractor={(item, index) => index}
      />

I get error

TypeError: undefined is not an object (evaluating 'items.length')

Your code seems ok. Are you sure you are using a valid JSON? Because the JSON you posted is not valid... — Giovanni Esposito, Jul 18 '21 at 14:24
What do you mean by "JSON you posted is not valid"? I'm a newbie so explanation would be good. I'm using it just like I posted. — Kaepxer, Jul 18 '21 at 14:49
Not sure, but I believe that while de-structuring in render item you are using name as item2, which is not there as renderItem returns value name as item. So that must be causing the issue, if you change the name to item from item2, I guess it should work fine. — Hardik3296, Jul 18 '21 at 14:58
Can you try this once, use this { item:item2 } while destructuring and see if item2 then works? — Hardik3296, Jul 18 '21 at 15:06
That works also. If we come to Giovanni's says, do I need to JSON.stringfy() my array before use it as an sections in sectionlist? — Kaepxer, Jul 18 '21 at 15:07
I do no think you need to stringify you lectures array. It should work fine — Hardik3296, Jul 18 '21 at 15:28

score 1 · Accepted Answer · answered Jul 18 '21 at 15:15

The issue here is that as per the official documentation the renderItem passes an object with three properties to the function - item, index, seperators. In the above code you are trying to de-structure a property called item2 which does not exist in the object as that property name is item. So to keep separate name for both the renderItem methods you can rename the second item to item2 using this syntax:

renderItem={({ item: item2 })=>{}}

This will allow you to rename the property to item2 and it will work fine. You can further read about renaming destructured variable here Renaming de-structured Variable

How to use nested flatlist or sectionlist?

1 Answers1