title: Flatlist warning Each child in a list should have a unique "key" only on first render
body: <h1>problem</h1>
  <p>When the app gets loaded for the first time.The flatlist gives a waring and displays
  &quot;Warning: Each child in a list should have a unique &quot;key&quot; prop.%s%s See <a href="https://reactjs.org/link/warning-keys" rel="nofollow noreferrer">https://reactjs.org/link/warning-keys</a> for more information.%s&quot;</p>
  <p>But this warning is only when it loaded for the first time. When saving the file again. Where the flatlist is located the warning disappears</p>
  <h2>I have tried to fix it with by using the key extractor in different ways</h2>
  <p>1</p>
  <pre><code>&lt;FlatList
    ref={flatListRef}
    data={data}
    keyExtractor={(item)=&gt; item._id.toString()}
    renderItem={renderItem} 
  /&gt;
  </code></pre>
  <p>2</p>
  <pre><code>const keyExtractor = useCallback((item)=&gt; item.postId,[])
  
  &lt;FlatList
    ref={flatListRef}
    data={data}
    keyExtractor={(item)=&gt; item._id.toString()}
    renderItem={renderItem} 
  /&gt;
  </code></pre>
  <p>But the warning keeps on coming back on when the app is loaded for the first time.</p>
  <h2>question</h2>
  <p>Whats the correct way to use the keyExtractor and how do to prevent the warning for happening.</p>
  <h2>Solution</h2>
  <p>One of the render components triggered a map function where there was no key given.</p>