tweak object property warning.
Paul O’Shannessy committed
Feb 19, 2014 at 18:07 UTC
7e7aa21e249c84c22243cc7704c8d7cb7c195c91
1 file changed
+4
-3
docs/docs/04-multiple-components.md
+4
-3
@@ -134,15 +134,16 @@ The situation gets more complicated when the children are shuffled around (as in
134
135
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).
136
137
-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:
137
+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:
138
139
```javascript
140
render: function() {
141
var items = {};
142
143
this.props.results.forEach(function(result) {
144
- // Using the numeric 'id' value as a key would result non-deterministic ordering
145
- // of results.
144
+ // If result.id can look like a number (consider short hashes), then
145
+ // object iteration order is not guaranteed. In this case, we add a prefix
146
+ // to ensure the keys are strings.
147
items['result-' + result.id] = <li>{result.text}</li>;
148
});
149