{"commit":{"shortRevision":"18874a6054","authorName":"Nick Fitzgerald","authorEmail":"fitzgen@gmail.com","authoredAt":"2014-08-27T10:19:53-07:00","subject":"Explain where to provide the key for dynamic children.","revision":"18874a6054a5e56bb2c4e6c0353537a1b1f2c0e1"},"patch":"diff --git a\/docs\/docs\/04-multiple-components.md b\/docs\/docs\/04-multiple-components.md\nindex eb04cfd3f4..0b3d9bf6b4 100644\n--- a\/docs\/docs\/04-multiple-components.md\n+++ b\/docs\/docs\/04-multiple-components.md\n@@ -133,6 +133,46 @@ The situation gets more complicated when the children are shuffled around (as in\n \n When React reconciles the keyed children, it will ensure that any child with `key` will be reordered (instead of clobbered) or destroyed (instead of reused).\n \n+The `key` should *always* be supplied directly to the components in the array, not to the container HTML child of each component in the array:\n+\n+```javascript\n+\/\/ WRONG!\n+var ListItemWrapper = React.createClass({\n+ render: function() {\n+ return

{this.props.data.text}<\/li>;\n+ }\n+});\n+var MyComponent = React.createClass({\n+ render: function() {\n+ return (\n+

;\n+ })}\n+ <\/ul>\n+ );\n+ }\n+});\n+\n+\/\/ Correct :)\n+var ListItemWrapper = React.createClass({\n+ render: function() {\n+ return

{this.props.data.text}<\/li>;\n+ }\n+});\n+var MyComponent = React.createClass({\n+ render: function() {\n+ return (\n+

;\n+ })}\n+ <\/ul>\n+ );\n+ }\n+});\n+```\n+\n You can also key children by passing an object. The object keys will be used as `key` for each value. However it is important to remember that JavaScript does not guarantee the ordering of properties will be preserved. In practice browsers will preserve property order **except** for properties that can be parsed as a 32-bit unsigned integers. Numeric properties will be ordered sequentially and before other properties. If this happens React will render components out of order. This can be avoided by adding a string prefix to the key:\n \n ```javascript\n","parents":["f7c7676a98c3045f3f3ebf2cd07cfa33995350af"],"body":"","files":[{"status":"M","path":"docs\/docs\/04-multiple-components.md"}]}

dillon1000/react

Files changed