Object.keys preserves key order. I’ve never (will never) depend on, but good to know …

  • However, this breaks down in one situation: if you have two sets of children that you need to reorder, there’s no way to put a key on each set without adding a wrapper element.
  • That is, if you have a component such as: – – The children will unmount and remount as you change the prop because there aren’t any keys marked on the two sets of children.
  • To solve this problem, you can use the add-on to give keys to the sets of children.
  • Instead of creating arrays, we write: – – The keys of the passed object (that is, and ) are used as keys for the entire set of children, and the order of the object’s keys is used to determine the order of the rendered children.
  • Note also that we’re relying on the JavaScript engine preserving object enumeration order here, which is not guaranteed by the spec but is implemented by all major browsers and VMs for objects with non-numeric keys.

In most cases, you can use the key prop to specify keys on the elements you’re returning from render. However, this breaks down in one situation: if you have two sets of children that you need to reorder, there’s no way to put a key on each set without adding a wrapper element.

Importing

import createFragment from ‘react-addons-create-fragment’ ; // ES6 var createFragment = require ( ‘react-addons-create-fragment’ ) ; // ES5 with npm

. However, this breaks down in one situation: if you have two sets of children that you need to reorder, there’s no way to put a key on each set without adding a wrapper element.

That is, if you have a component such as:

function Swapper (props) { let children; if (props.swapped) { children = [props.rightChildren, props.leftChildren] ; } else { children = [props.leftChildren, props.rightChildren] ; } return

{children}
; }

prop because there aren’t any keys marked on the two sets of children.

add-on to give keys to the sets of children.

Instead of creating arrays, we write:

import createFragment from ‘react-addons-create-fragment’ ; function Swapper (props) { let children; if (props.swapped) { children = createFragment ( { right: props.rightChildren, left: props.leftChildren } ) ; } else { children = createFragment ( { left: props.leftChildren, right: props.rightChildren } ) ; } return

{children}
; }

) are used as keys for the entire set of children, and the order of the object’s keys is used to determine the order of the rendered children. With this change, the two sets of children will be properly reordered in the DOM without unmounting.

helpers to loop through a fragment but should not…

Keyed Fragments