5

I'm following the ReactNative tutorial on SectionLists (https://facebook.github.io/react-native/docs/using-a-listview.html#content) and have run into a warning message.

The warnings state

"Warning: VirtualizedSectionList: A section you supplied is missing the key property.

"VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor"

Can someone assist in resolving this warning?

Edit So I was able to resolve the first warning by adding a key to the sections

sections={[
            {key: 'D', title: 'D', data: ['Devin']},
            {key: 'J', title: 'J', data: ['Jackson', 'James', 'Jillian',   'Jimmy', 'Joel', 'John', 'Julie']},
          ]}

But am stilling getting the second error for 1 instance.

FortuneFaded
  • 1,259
  • 4
  • 20
  • 28

2 Answers2

1

I came across the same error before. Defining the keyExtractor property solved it for me.

https://facebook.github.io/react-native/docs/sectionlist.html#keyextractor

Have you tried this yet?

justelouise
  • 714
  • 1
  • 5
  • 20
0

The first error is asking you to add key properties to each section object, the second error is asking you to add a key for each item you have in the data array. Keys help react determine which items have been added/changed/removed. So you might want to change your data to something like this:

data: [{ key: //add a unique key here or use keyExtractor, name: 'Devin' }, ...]
Matt Aft
  • 8,742
  • 3
  • 24
  • 37
  • Adding a unique key does not matter. The `keyExtractor` props will automatically add a unique key for each object. – Ray Jun 27 '17 at 00:25
  • Yeah...which is why I said to add a unique key or use keyExtractor. You should do one or the other. – Matt Aft Jun 27 '17 at 00:35