React cloneElement not setting key
<p>I'm building a table control which dynamically generates keys (which I understand may not be a good idea - I imagine the key should be uniquely associated with the data it represents otherwise React could just generate unique ids for us?), but either way it seems the keys are not being set and I have no idea why. The rows in the table are generated with a function that can be found <a href="https://github.com/jpollard-cs/flexable/blob/master/src/TableBody.js" rel="noreferrer">here</a>. Basically I have a <a href="https://github.com/jpollard-cs/flexable/blob/master/src/FlexableElement.js" rel="noreferrer">helper component</a> which takes an optional component to transform all child elements - here is one of those transform functions (from the <code>TableBody</code> component): </p>

<pre><code>const transformRows = (keyPrefix) =&gt; (children, passthroughProps) =&gt; (React.Children.map(children, (c, i) =&gt; {
    return React.cloneElement(c, {
        key: `${keyPrefix}-${i}`,
        style: rowStyle,
        className: rowClassName,
        columnDefinitions: columnDefinitions,
        rowData: tableData[i],
        includeVerticalScrollbar,
        ...passthroughProps
    });
}));
</code></pre>

<p>the weird thing is that when I step through the code it seems the key is being assigned, but then I get a warning in the browser <code>Each child in an array or iterator should have a unique "key" prop</code> which traces back to <a href="https://github.com/jpollard-cs/flexable/blob/master/src/Row.js#L25" rel="noreferrer">here</a> in the stack trace.</p>

<p>Any ideas?</p>