title: React: Dynamically setting element keys
body: <p>tl;dr -- How do I dynamically add a <code>key</code> to a React Element?</p>
  
  <hr>
  
  <p>I have a React component that, when standing alone, has a static list of children:</p>
  
  <pre><code>&lt;componentA&gt;
    &lt;child ... /&gt;
    &lt;child ... /&gt;
    &lt;child ... /&gt;
  &lt;/componentA&gt;
  </code></pre>
  
  <p>As the list is static there are no keys on any of the children as they're not needed.</p>
  
  <p>Now I have another component that wraps this one and makes it's children dynamic:</p>
  
  <pre><code>function componentB(componentA) {
    return class extends React.Component {
      render() {
        const filteredChildren = // ... filter this.props.children
  
        return (&lt;componentA&gt;
          {filteredChildren}
        &lt;/componentA&gt;)
      }
    }
  }
  </code></pre>
  
  <p>As the children are now dynamic I need to add <code>key</code>s to them, but if I try something like:</p>
  
  <pre><code>React.Children.map((child, i) =&gt; {
    child.key = i;
    return child
  });
  </code></pre>
  
  <p>it fails saying <code>key</code> is readonly.  From <a href="https://stackoverflow.com/questions/37354086/react-cloneelement-not-setting-key">this question</a> it seems that <code>cloneElement</code> is a no-go as well.  So is there a way to dynamically set a <code>key</code>?</p>