{"files":[{"path":"docs\/docs\/10.6-create-fragment.md","status":"M"}],"commit":{"authorEmail":"ankitml@gmail.com","authorName":"ankitml","authoredAt":"2016-05-24T01:27:15+05:30","revision":"a6445a18f98c9b5c453acee7fb5783b35603598e","subject":"Keyed Fragment of AddOns ported to ES6","shortRevision":"a6445a18f9"},"parents":["1b02c731ce68c8b2c33c41276892ad7c1a8b53f8"],"body":"","patch":"diff --git a\/docs\/docs\/10.6-create-fragment.md b\/docs\/docs\/10.6-create-fragment.md\nindex 94d9267e5c..47a13506f6 100644\n--- a\/docs\/docs\/10.6-create-fragment.md\n+++ b\/docs\/docs\/10.6-create-fragment.md\n@@ -11,24 +11,15 @@ In most cases, you can use the `key` prop to specify keys on the elements you're\n That is, if you have a component such as:\n \n ```js\n-var Swapper = React.createClass({\n- propTypes: {\n- \/\/ `leftChildren` and `rightChildren` can be a string, element, array, etc.\n- leftChildren: React.PropTypes.node,\n- rightChildren: React.PropTypes.node,\n-\n- swapped: React.PropTypes.bool\n- },\n- render: function() {\n- var children;\n- if (this.props.swapped) {\n- children = [this.props.rightChildren, this.props.leftChildren];\n- } else {\n- children = [this.props.leftChildren, this.props.rightChildren];\n- }\n- return

{children}<\/div>;\n+function Swapper(props) {\n+ var children;\n+ if (props.swapped) {\n+ children = [props.rightChildren, props.leftChildren];\n+ } else {\n+ children = [props.leftChildren, props.rightChildren];\n }\n-});\n+ return

{children}<\/div>;\n+}\n ```\n \n 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.\n@@ -42,34 +33,23 @@ Instead of creating arrays, we write:\n ```js\n var createFragment = require('react-addons-create-fragment');\n \n-if (this.props.swapped) {\n- children = createFragment({\n- right: this.props.rightChildren,\n- left: this.props.leftChildren\n- });\n-} else {\n- children = createFragment({\n- left: this.props.leftChildren,\n- right: this.props.rightChildren\n- });\n+function Swapper(props) {\n+ var children;\n+ if (props.swapped) {\n+ children = createFragment({\n+ right: props.rightChildren,\n+ left: props.leftChildren\n+ });\n+ } else {\n+ children = createFragment({\n+ left: props.leftChildren,\n+ right: props.rightChildren\n+ });\n+ }\n+ return

{children}<\/div>;\n }\n ```\n \n 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.\n \n 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.\n-\n-> **Note:**\n->\n-> In the future, `createFragment` may be replaced by an API such as\n->\n-> ```js\n-> return (\n->

\n-> {this.props.rightChildren}<\/x:frag>,\n-> {this.props.leftChildren}<\/x:frag>\n-> <\/div>\n-> );\n-> ```\n->\n-> allowing you to assign keys directly in JSX without adding wrapper elements.\n"}

dillon1000/react

Files changed