title: React-Native FlatList- Warning: Each child in an array or iterator should have a unique "key" prop, even after giving key={index}
body: <p>I am building the photo-feed application, <a href="https://github.com/ganesh-deshmukh/exchange-o-gram/commits/master" rel="noreferrer">project-repo-here</a> , 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,</p>
  
  <p>error is in comments.js file.</p>
  
  <pre><code>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 &lt;unknown&gt;
  - node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
  - node_modules/promise/setimmediate/core.js:123:25 in &lt;unknown&gt;
  - ... 8 more stack frames from framework internals
  </code></pre>
  
  <p>I am displaying comments-array using flatList and gave </p>
  
  <p><code>keyExtractor={(item, index) =&gt; {
                item.id;
              }}</code></p>
  
  <p>also, I tried giving key={index}, but same error.
  I gave unique key as index to , but error occurs,</p>
  
  <p>flatList component is </p>
  
  <pre><code>   &lt;FlatList
          refreshing={this.state.refresh}
          data={this.state.comments_list}
          keyExtractor={(item, index) =&gt; {
            item.id;
          }}
          style={{ flex: 1, backgroundColor: "#eee" }}
          renderItem={({ item, index }) =&gt; (
            &lt;View
              key={item.id}
              style={{
                width: "100%",
                overflow: "hidden",
                marginBottom: 5,
                justifyContent: "space-between",
                borderColor: "grey"
              }}
            &gt;
              &lt;View style={{ padding: 5 }}&gt;
                &lt;Text&gt;time: {item.timestamp}&lt;/Text&gt;
                &lt;TouchableOpacity&gt;
                  &lt;Text&gt;{item.author}&lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
  
              &lt;View&gt;
                &lt;Text&gt;{item.comment}&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          )}
        /&gt;
  </code></pre>
  
  <p>firebase structure is this
  <a href="https://i.stack.imgur.com/pLbeT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pLbeT.png" alt="structureOfDB"></a> </p>