title: Is there a way to get React to autodefine "keys" for children?
body: <p>I'm learning React, and I stumbled upon this quirk with "dynamic children."</p>
  
  <p>Preamble with a code example:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>// Render Pass 1
  &lt;Card&gt;
    &lt;p&gt;Paragraph 1&lt;/p&gt;
    &lt;p&gt;Paragraph 2&lt;/p&gt;
  &lt;/Card&gt;
  
  // Render Pass 2
  &lt;Card&gt;
    &lt;p&gt;Paragraph 2&lt;/p&gt;
  &lt;/Card&gt;
  </code></pre>
  
  <p>In the second <code>render()</code> pass, it seems the way the vdom diffing works is that it deletes the second  child, then transforms the text in the first to say "Paragraph 2." It's fast, but you'll see weird stuff happening if you needed state to persist on say... the second  child!</p>
  
  <p>So React suggests using a <a href="https://facebook.github.io/react/docs/multiple-components.html#dynamic-children" rel="noreferrer">"key" attribute for those  tags</a>. Now the vdom diffing will be surprise-free and you'll see state getting preserved across <code>renders()</code>.</p>
  
  <p>My question: is there a way to get React to set "keys" on its own rather than doing it the way they suggest?</p>