If I have a react ponent 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?

If I have a react ponent 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?

• javascript
• reactjs
• toarray

• 1 It's just a React specific key that React internally uses in order to keep track of all the children in the virtual DOM tree. – Henrik Andersson Commented Nov 19, 2015 at 5:18
• @HenrikAndersson Why does React.Children.map do the same? – tonix Commented Dec 24, 2019 at 11:44
• 2 @tonix because React.Children is the same as this.props.children. – Henrik Andersson Commented Dec 25, 2019 at 17:05
• @HenrikAndersson I am sorry, I have not expressed myself clearly. I meant, why does React.Children.map returns an array of children with their keys changed as React.Children.toArray? – tonix Commented Dec 26, 2019 at 9:02
• Ah, I haven't found a source that explains the why behind the decision but if I were to hazard a guess then it's easier for the library to fix keys and rely on themselves than on product developers. If you want to dig into it yourself the investigation starts here: github./facebook/react/blob/… – Henrik Andersson Commented Dec 26, 2019 at 9:43

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.