React Native key issue

Question

I'm building a FlatList in React Native. Every row in the list is an Accordion component (github here) with Header and Content sections. However I'm getting the unique "key" prop error below:

I've read a lot about key properties here and here, and tried to implement key properties on my components. The related code parts on my list are:

1. I have a datasource as follows. An array, whose each object having name, number and key fields.

   [
       {
           "name": "Credit Card",
           "number": "123456",
           "key": 0
       },
       {
           "name": "Bank Account",
           "number": "222222",
           "key": 1
       },
       ...
   ]
   

2. FlatList component:

   <FlatList
     data={filteredList}
     keyExtractor={item => item.key}
     renderItem={({item}) => _renderAccordion(item)}
   />
   

   I've added the keyExtractor as suggested in the docs.

3. Each row in the flat list is rendered with an Accordion component:

   var _renderAccordion = function(item) {
       return(
           <Accordion 
               sections={[item]}
               key={"accordion"+item.key}
               renderHeader={_renderHeader}
               renderContent={_renderContent}
               underlayColor={colors.white}
           />
       );
   }
   

   The accordion component has the key prop.

4. Headers of accordion are rendered as follows:

   var _renderHeader = function(item) {
       return (
           <View key={"header"+item.key}>
               <Text>{item.name}</Text>
           </View>
       );
   }
   

   I've added a unique key prop to the headers in case.

5. The contents of accordion are rendered as:

   var _renderContent = function(item) {
       return (
           <View key={"content"+section.key}>
               <Text>{item.number}</Text>
           </View>
       );
   }
   

Each key I used in components are unique and I think I have added keys to all required parts. But I'm still getting the error. What could I be missing? Thanks in advance.

Answer 1

Try in your code

Flatlist Component

<FlatList
  data={filteredList}
  keyExtractor={item => ''+item.key}
  renderItem={({item}) => _renderAccordion(item)}
/>

The warning should be dismissed after change key from number to string.

Reference to React Native Flatlist Document

keyExtractor: (item: ItemT, index: number) => string