React-Native FlatList- Warning: Each child in an array or iterator should have a unique "key" prop, even after giving key={index}

Question

I am building the photo-feed application, project-repo-here , in the comments section after clicking on show-comments, it shows comment page on a device, but in a terminal, it breaks with error as,

error is in comments.js file.

Warning: Each child in an array or iterator should have a unique "key" prop.%s%s See documentationOfREact/react-warning-keys for more information.%s, 

Check the render method of `VirtualizedList`., , 
    in CellRenderer (at VirtualizedList.js:687)
    in VirtualizedList (at FlatList.js:662)
    in FlatList (at comments.js:212)
    in RCTView (at View.js:44)
    in comments (created by SceneView)
    in SceneView (at StackViewLayout.js:795)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.js:69)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:57)
    in Card (at createPointerEventsContainer.js:27)
    in Container (at StackViewLayout.js:860)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.js:311)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.js:307)
    in Handler (at StackViewLayout.js:300)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:79)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.js:22)
    in StackView (created by Navigator)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
    in NavigationContainer (at App.js:70)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)
- node_modules/react/cjs/react.development.js:217:39 in warningWithoutStack
- node_modules/react/cjs/react.development.js:617:32 in warning
- node_modules/react/cjs/react.development.js:1429:14 in validateExplicitKey
- node_modules/react/cjs/react.development.js:1451:28 in validateChildKeys
- node_modules/react/cjs/react.development.js:1619:22 in cloneElementWithValidation
- node_modules/react-native/Libraries/Lists/VirtualizedList.js:947:6 in render
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:10563:21 in finishClassComponent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14091:21 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14129:41 in workLoop
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14226:15 in renderRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15193:17 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15090:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15047:14 in performSyncWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14925:19 in requestWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14711:16 in scheduleWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7700:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:364:31 in setState
* app/screens/comments.js:66:22 in <unknown>
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in <unknown>
- ... 8 more stack frames from framework internals

I am displaying comments-array using flatList and gave

keyExtractor={(item, index) => { item.id; }}

also, I tried giving key={index}, but same error. I gave unique key as index to , but error occurs,

flatList component is

   <FlatList
        refreshing={this.state.refresh}
        data={this.state.comments_list}
        keyExtractor={(item, index) => {
          item.id;
        }}
        style={{ flex: 1, backgroundColor: "#eee" }}
        renderItem={({ item, index }) => (
          <View
            key={item.id}
            style={{
              width: "100%",
              overflow: "hidden",
              marginBottom: 5,
              justifyContent: "space-between",
              borderColor: "grey"
            }}
          >
            <View style={{ padding: 5 }}>
              <Text>time: {item.timestamp}</Text>
              <TouchableOpacity>
                <Text>{item.author}</Text>
              </TouchableOpacity>
            </View>

            <View>
              <Text>{item.comment}</Text>
            </View>
          </View>
        )}
      />

firebase structure is this

Answer 1

You need to return the Key like this

keyExtractor={(item, index) => {
          return item.id;
        }}

Answer 2

return ( <FlatList
        data={options}
        keyExtractor={(item, index) => {
         return  index.toString();
        }}
        renderItem={_renderItem2}
/>);

remember to use return when using the {} bracket, otherwise it will not work.