diff --git a/docs/04-multiple-components.md b/docs/04-multiple-components.md index 3c9b3ad3..85ceffff 100644 --- a/docs/04-multiple-components.md +++ b/docs/04-multiple-components.md @@ -134,6 +134,26 @@ 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). +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) { + // If result.id can look like a number (consider short hashes), then + // object iteration order is not guaranteed. In this case, we add a prefix + // to ensure the keys are strings. + items['result-' + result.id] =
  • {result.text}
  • ; + }); + + return ( +
      + {items} +
    + ); + } +``` ## Data Flow