title: How to find the cause of the Warning: Each child in a list should have a unique "key" prop
body: <p>I often run into the error</p>
  
  <pre><code>Warning: Each child in a list should have a unique "key" prop.  Check the render method of `MyComponent`.
  </code></pre>
  
  <p>in React.  The error message always tells you the offending component, but not the specific HTML tag / virtual DOM element that is offending.  Working in a large code base with sometimes big components, this makes finding the source of the error very difficult.</p>
  
  <p><strong>What causes this error?  I'm looking for a definitive list.</strong></p>
  
  <ul>
  <li>A tag in an array with a "key" prop missing entirely (pretty sure)</li>
  <li>Two tags in an array with the same "key" prop value?  (i thought there was a different error message for this)</li>
  </ul>
  
  <p>Do two elements written side-by-side (such as <code>&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;</code>) count as "children in a list"?  Will they also cause the error?</p>
  
  <p><strong>What are effective strategies for finding the offensive tag?</strong></p>
  
  <ul>
  <li>adding <code>key={Math.random()}</code> to every single keyless tag in the component, one-by-one, until the error disappears, and then seeing which one you added last. (can be time consuming, and sometimes doesn't work)</li>
  <li>undoing changes chronologically until the error disappears. (can be time consuming)</li>
  <li>something better here</li>
  </ul>
  
  <p>I am looking for a thorough and canonical answer.</p>