react-addons-create-fragment

react-addons-create-fragment

Note: This is a legacy React addon, and is no longer maintained.

We don't encourage using it in new code, but it exists for backwards compatibility.
The recommended migration path is to use arrays with explicit keys on individual elements.

Importing

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

If you prefer a <script> tag, you can get it from React.addons.createFragment with:

<!-- development version -->
<script src="https://unpkg.com/react-addons-create-fragment/react-addons-create-fragment.js"></script>

<!-- production version -->
<script src="https://unpkg.com/react-addons-create-fragment/react-addons-create-fragment.min.js"></script>

In this case, make sure to put the <script> tag after React.

Overview

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.

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 <div>{children}</div>;
}

The children will unmount and remount as you change the swapped prop because there aren't any keys marked on the two sets of children.

To solve this problem, you can use the createFragment add-on to give keys to the sets of children.

Array<ReactNode> createFragment(object 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 <div>{children}</div>;
}

The keys of the passed object (that is, left and right) 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.

The return value of createFragment should be treated as an opaque object; you can use the React.Children helpers to loop through a fragment but should not access it directly. 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.

Changelog

15.6.2 (September 25, 2017)

All Packages

• Switch from BSD + Patents to MIT license

React DOM

• Fix a bug where modifying document.documentMode would trigger IE detection in other browsers, breaking change events. (@aweary in #10032)
• CSS Columns are treated as unitless numbers. (@aweary in #10115)
• Fix bug in QtWebKit when wrapping synthetic events in proxies. (@walrusfruitcake in #10115)
• Prevent event handlers from receiving extra argument in development. (@aweary in #10115)
• Fix cases where onChange would not fire with defaultChecked on radio inputs. (@jquense in #10156)
• Add support for controlList attribute to allowed DOM properties (@nhunzaker in #9940)
• Fix a bug where creating an element with a ref in a constructor did not throw an error in development. (@iansu in #10025)