Add Rendering Multiple Nodes With Fragments as a react til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_595 TILs and counting..._
+_596 TILs and counting..._
 
 ---
 
@@ -425,6 +425,7 @@ _595 TILs and counting..._
 - [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md)
 - [Passing Props Down To React-Router Route](react/passing-props-down-to-react-router-route.md)
 - [Proxy To An API Server In Development With CRA](react/proxy-to-an-api-server-in-development-with-cra.md)
+- [Rendering Multiple Nodes With Fragments](react/rendering-multiple-nodes-with-fragments.md)
 
 ### Ruby
 

react/rendering-multiple-nodes-with-fragments.md

@@ -0,0 +1,28 @@
+# Rendering Multiple Nodes With Fragments
+
+When rendering, React expects a component to only return a single node. The
+DOM hierarchy of most components will easily follow this rule, but what
+about those components that do have multiple inline nodes?
+
+The two solutions have been to either wrap the inline nodes in an outer
+`div` or to return them as a comma separated array of nodes. With React 16,
+we can avoid the deficiencies of both of these approaches by using a
+fragment.
+
+Just wrap your inline nodes with a `React.Fragment` node. React will
+understand your JSX without wrapping the output DOM in a superfluous `div`.
+
+```javascript
+render() {
+  return (
+    <React.Fragment>
+      <p>Name: {firstName} {lastName}</p>
+      <p>Email: {email}</p>
+      <p>Age: {age}</p>
+    </React.Fragment>
+  );
+}
+```
+
+See the [docs on fragments](https://reactjs.org/docs/fragments.html) for
+more details.