Skip to content

Instantly share code, notes, and snippets.

@zpao
Created February 20, 2014 00:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zpao/9104353 to your computer and use it in GitHub Desktop.
Save zpao/9104353 to your computer and use it in GitHub Desktop.
diff --git a/docs/docs/04-multiple-components.md b/docs/docs/04-multiple-components.md
index 38d1a9c..8295f5d 100644
--- a/docs/docs/04-multiple-components.md
+++ b/docs/docs/04-multiple-components.md
@@ -134,15 +134,16 @@ The situation gets more complicated when the children are shuffled around (as in
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).
-Keys can also be specified as object properties. 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:
+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:
```javascript
render: function() {
var items = {};
this.props.results.forEach(function(result) {
- // Using the numeric 'id' value as a key would result non-deterministic ordering
- // of results.
+ // If result.id is not guaranteed to be nonnumeric (consider short hashes),
+ // then we need to modify before storing in an object. In this case we are
+ // prefixing to turn possible numbers into strings.
items['result-' + result.id] = <li>{result.text}</li>;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment