Why do keys change when children are used with React.Children.toArray?

Question

If I have a react component with children and I call React.Children.toArray on these children, why does the objects in the array have keys that are prepended with .$

var Child = React.createClass({
    render: function() {
        console.log(React.Children.toArray(this.props.children)[0].key);
        return <div>{this.props.children}</div>
    }
});

var Container = React.createClass({
    render: function() {   
        return <Child><div key={1}>1</div></Child>
    }
});

ReactDOM.render(<Container />,  document.getElementById('container'));

This logs .$1 to the console. Why is the key changed from 1 to .$1?

Answer 1

See the note below https://facebook.github.io/react/docs/top-level-api.html#react.children.toarray

Note: React.Children.toArray() changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, toArray prefixes each key in the returned array so that each element's key is scoped to the input array containing it.