Add warning about object property order.
It's easy to misuse the properties-as-keys feature and end up with children rendered out of order. Add a note and example of how to avoid this.
Josh Duck committed
Jan 29, 2014 at 10:53 UTC
b5dbbd5b2deef97b992ea69e936d6def3e345255
1 file changed
+19
docs/docs/04-multiple-components.md
+19
@@ -134,6 +134,25 @@ 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:
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.
146
+ items['result-' + result.id] = <li>{result.text}</li>;
147
+ });
148
+
149
+ return (
150
+ <ol>
151
+ {items}
152
+ </ol>
153
+ );
154
+ }
155
+```
156
157
## Data Flow
158