0

Below is the keyExtractor method I'm using. This method worked fine when the component was a FlatList, but I keep getting the following message after I converted the FlatList to a SectionList.

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

// defining the keyExtractor function

_keyExtractor = (item, index) => {
    console.log('id in key extractor', item.id)
    return item.id;
  }

// during render

<SectionList
   ...
   keyExtractor={this._keyExtractor}
   ...
/>

I'm logging the item.id and it's printing out distinct ids correctly. Any thoughts? Thanks in advance.

fourestfire
  • 197
  • 1
  • 2
  • 8

1 Answers1

4

You might go through this link. The warning is shown because each section needs a item key. For eg:-

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

Ansal Ali
  • 1,583
  • 1
  • 13
  • 30
  • 1
    You're absolutely right. It turns out that the keyExtractor only covers the keys for the items within each section, but you also have to add a key to each section manually, which isn't properly explained in the docs. – fourestfire Jul 13 '17 at 21:01