CODEWITHSUNDEEP
react-nativereact-native-sectionlist
Ayush Agarwal
Ayush Agarwal

Reputation: 325

React Native - Undefined Is Not An Object(Evaluating 'Items.Length')

i can not sort out the issues- related to SectionList - React-native component.

This is my Data Structure:

[
  {
    id: 'newKey1',
    image: '',
    title: 'Men Clothing',
    subCategory: [
      {
        id: 'key1',
        displayName: 'value1',
        image: '',
      },
      {
        id: 'key2',
        displayName: 'value2',
        image: '',
      },
    ],
  },
  {
    id: 'newKey2',
    image: '',
    title: 'Women Clothing',
    subCategory: [
      {
        id: 'key1',
        displayName: 'value1',
        image: '',
      },
      {
        id: 'key2',
        displayName: 'value2',
        image: '',
      },
      {
        id: 'key3',
        displayName: 'value3',
        image: '',
      },
    ],
  },
];

Im trying to implement SectionList, where data is the above const value passed.

 return (
<View style={styles(theme).container}>
        <AdBanner />
        <SectionList sections={data} />
      </View>
);

but im getting an error: Undefined Is Not An Object(Evaluating 'Items.Length')

please kindly help and share possible solution for it thank you

Upvotes: 7

Views: 6023

Answers (3)

Irfan wani
Irfan wani

Reputation: 5085

@Bryson Kruk's answer is right. But i was getting the same error even after following the necessary steps, i.e, having data in this format;

const DATA = [{
title: "Some Title"
data : ["Some string", "Some other string"]
}];

And SectionList had the prop sections;

<SectionList
  sections={DATA}
/>

But Another point to be noted here is that, the value of data (present inside the DATA) must be a list. What i mean is, say you are trying to get the data on some calculations and sometimes the calculated value maybe null or any other thing other than a list. At that time it also gives such errors.

So to get rid of such errors, we should set its value as empty list when we have no data instead of setting it to null or any other value.

Upvotes: 0

Bryson Kruk
Bryson Kruk

Reputation: 281

It turns out the SectionLists requires a sections prop that takes an array of objects that REQUIRE a data prop, which is an array. This is easy to miss in the docs.

const DATA = [{
title: "Cake"
data : ["Some string", "Some other string"]
}];

<SectionList
  sections={DATA}
/>

Upvotes: 13

vaz
vaz

Reputation: 330

According to the docs your data must be in the form Array<Section>, where Section includes a Data Array property.

More info: https://reactnative.dev/docs/sectionlist#section

Upvotes: 1

Related Questions