diff --git a/README.md b/README.md index dee72b6..a1a735d 100644 --- a/README.md +++ b/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 diff --git a/react/rendering-multiple-nodes-with-fragments.md b/react/rendering-multiple-nodes-with-fragments.md new file mode 100644 index 0000000..8ecb3af --- /dev/null +++ b/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 ( + +

Name: {firstName} {lastName}

+

Email: {email}

+

Age: {age}

+
+ ); +} +``` + +See the [docs on fragments](https://reactjs.org/docs/fragments.html) for +more details.