{"id":273438,"date":"2018-07-17T06:38:50","date_gmt":"2018-07-17T13:38:50","guid":{"rendered":"http:\/\/css-tricks.com\/?p=273438"},"modified":"2018-07-17T06:38:50","modified_gmt":"2018-07-17T13:38:50","slug":"render-children-in-react-using-fragment-or-array-components","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/render-children-in-react-using-fragment-or-array-components\/","title":{"rendered":"Render Children in React Using Fragment or Array Components"},"content":{"rendered":"

What comes to your mind when React 16 comes up? Context<\/a>? Error Boundary<\/a>? Those are on point. React 16 came with those goodies and much more, but In this post, we’ll be looking at the rendering power it also introduced — namely, the ability to render children using Fragments and Array Components. <\/p>\n

These are new and really exciting concepts that came out of the React 16 release, so let\u2019s look at them closer and get to know them.<\/p>\n

<\/p>\n

Fragments<\/h3>\n

It used to be that React components could only return a single element. If you have ever tried to return more than one element, you know that you\u2019ll will be greeted with this error: Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag<\/code>. The way out of that is to make use of a wrapper div or span element that acts as the enclosing tag.<\/p>\n

So instead of doing this:<\/p>\n

class Countries extends React.Component {\r\n  render() {\r\n    return (\r\n      <li>Canada<\/li>\r\n      <li>Australia<\/li>\r\n      <li>Norway<\/li>\r\n      <li>Mexico<\/li>\r\n    )\r\n  }\r\n}<\/code><\/pre>\n
…you have to add either an ol<\/code> or ul<\/code> tag as a wrapper on those list items:<\/p>\n
class Countries extends React.Component {\r\n  render() {\r\n    return (\r\n      <ul>\r\n        <li>Canada<\/li>\r\n        <li>Australia<\/li>\r\n        <li>Norway<\/li>\r\n        <li>Mexico<\/li>\r\n      <\/ul>\r\n    )\r\n  }\r\n}<\/code><\/pre>\n
Most times, this may not be the initial design you had for the application, but you are left with no choice but to compromise on this ground.<\/p>\n
React 16 solves this with Fragments<\/strong>. This new features allows you to wrap a list of children without adding an extra node. So, instead of adding an additional element as a wrapper like we did in the last example, we can throw <React.Fragment><\/code> in there to do the job:<\/p>\n
class Countries extends React.Component {\r\n  render() {\r\n    return (\r\n      <React.Fragment>\r\n        <li>Canada<\/li>\r\n        <li>Australia<\/li>\r\n        <li>Norway<\/li>\r\n        <li>Mexico<\/li>\r\n      <\/React.Fragment>\r\n    )\r\n  }\r\n}<\/code><\/pre>\n
You may think that doesn\u2019t make much difference. But, imagine a situation where you have a component that lists different items such as fruits and other things. These items are all components, and if you are making use of old React versions, the items in these individual components will have to be wrapped in an enclosing tag. Now, however, you can make use of fragments and do away with that unnecessary markup.<\/p>\n
Here\u2019s a sample of what I mean:<\/p>\n
class Items extends React.Component {\r\n  render() {\r\n    return (\r\n      <React.Fragment>\r\n        <Fruit \/>\r\n        <Beverages \/>\r\n        <Drinks \/>\r\n      <\/React.Fragment>\r\n    )\r\n  }\r\n}<\/code><\/pre>\n
We have three child components inside of the fragment and can now create a component for the container that wraps it. This is much more in line with being able to create components out of everything and being able to compile code with less cruft.<\/p>\n
Fragment Shorthand<\/h4>\n
There is a shorthand syntax when working with Fragments, which you can use. Staying true to its fragment nature, the syntax is like a fragment itself, leaving only only empty brackets behind.<\/p>\n
Going back to our last example:<\/p>\n
class Fruit extends React.Component {\r\n  render() {\r\n    return (\r\n      <>\r\n        <li>Apple<\/li>\r\n        <li>Orange<\/li>\r\n        <li>Blueberry<\/li>\r\n        <li>Cherry<\/li>\r\n      <\/>\r\n    )\r\n  }\r\n}<\/code><\/pre>\n
Question: Is a fragment better than a container div?<\/h4>\n
You may be looking for a good reason to use Fragments instead of the container div you have always been using. Dan Abramov<\/a> answered the question on StackOverflow<\/a>. To summarize:<\/p>\n
    \n
  1. It\u2019s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and\/or deep trees, but application performance often suffers from death by a thousand cuts. This is one less cut.<\/li>\n
  2. Some CSS mechanisms like flexbox and grid have a special parent-child relationship, and adding divs in the middle makes it harder to maintain the design while extracting logical components.<\/li>\n
  3. The DOM inspector is less cluttered.<\/li>\n<\/ol>\n
    Keys in Fragments<\/h4>\n
    When mapping a list of items, you still need to make use of keys the same way as before. For example, let’s say we want to pass a list of items as props from a parent component to a child component. In the child component, we want to map through the list of items we have and output each item as a separate entity. Here\u2019s how that looks:<\/p>\n
    const preload = {\r\n  \"data\" : [\r\n    {\r\n      \"name\": \"Reactjs\",\r\n      \"url\": \"https:\/\/reactjs.org\",\r\n      \"description\": \"A JavaScript library for building user interfaces\",\r\n    },\r\n    {\r\n      \"name\": \"Vuejs\",\r\n      \"url\": \"https:\/\/vuejs.org\",\r\n      \"description\": \"The Progressive JavaScript Framework\",\r\n    },\r\n    {\r\n      \"name\": \"Emberjs\",\r\n      \"url\": \"https:\/\/www.emberjs.com\",\r\n      \"description\": \"Ember.js is an open-source JavaScript web framework, based on the Model\u2013view\u2013viewmodel pattern\"\r\n    }\r\n  ]\r\n}\r\n\r\nconst Frameworks = (props) => {\r\n  return (\r\n    <React.Fragment>\r\n      {props.items.data.map(item => (\r\n        <React.Fragment key={item.id}>\r\n          <h2>{item.name}<\/h2>\r\n          <p>{item.url}<\/p>\r\n          <p>{item.description}<\/p>\r\n        <\/React.Fragment>\r\n      ))}\r\n    <\/React.Fragment>\r\n  )\r\n}\r\n\r\nconst App = () => {\r\n  return (\r\n    <Frameworks items={preload} \/>\r\n  )\r\n}<\/code><\/pre>\n
    See the Pen React Fragment Pen<\/a> by Kingsley Silas Chijioke (@kinsomicrote<\/a>) on CodePen<\/a>.<\/p>\n
    You can see that now, in this case, we are not making use of any divs in the Frameworks component. That\u2019s the key difference!<\/p>\n
    Render Children Using an Array of Components<\/h3>\n
    The second specific thing that came out of React 16 we want to look at is the ability to render multiple children using an array of components. This is a clear timesaver because it allows us to cram as many into a render instead of having to do it one-by-one.<\/p>\n
    Here is an example:<\/p>\n
    class Frameworks extends React.Component {\r\n  render () {\r\n    return (\r\n      [\r\n        <p>JavaScript:<\/p>\r\n        <li>React<\/li>,\r\n        <li>Vuejs<\/li>,\r\n        <li>Angular<\/li>\r\n      ]\r\n    )\r\n  }\r\n}<\/code><\/pre>\n
    You can also do the same with a stateless functional component:<\/p>\n
    const Frontend = () => {\r\n  return [\r\n    <h3>Front-End:<\/h3>,\r\n    <li>Reactjs<\/li>,\r\n    <li>Vuejs<\/li>\r\n  ]\r\n}\r\n\r\nconst Backend = () => {\r\n  return [\r\n    <h3>Back-End:<\/h3>,\r\n    <li>Express<\/li>,\r\n    <li>Restify<\/li>\r\n  ]\r\n}\r\n\r\nconst App = () => {\r\n  return [\r\n    <h2>JavaScript Tools<\/h2>,\r\n    <Frontend \/>,\r\n    <Backend \/>\r\n  ]\r\n}<\/code><\/pre>\n
    See the Pen React Fragment 2 Pen<\/a> by Kingsley Silas Chijioke (@kinsomicrote<\/a>) on CodePen<\/a>.<\/p>\n
    Conclusion<\/h3>\n
    Like the Context API<\/a> and Error Boundary<\/a> feature that were introduced in React 16, rendering children components with Fragment and multiples of them with Array Components are two more awesome features you can start making use of as you build your application.<\/p>\n
    Have you started using these in a project? Let me know how in the comments so we can compare notes. 🙂<\/p>\n","protected":false},"excerpt":{"rendered":"
    What comes to your mind when React 16 comes up? Context? Error Boundary? Those are on point. React 16 came […]<\/p>\n","protected":false},"author":251966,"featured_media":268951,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"The more we dig into React 16, the more we find! A closer look at fragments and array components.","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[557,1452],"class_list":["post-273438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-react","tag-react-fragments"],"acf":{"show_toc":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":377098,"url":"https:\/\/css-tricks.com\/5-mistakes-starting-react\/","url_meta":{"origin":273438,"position":0},"title":"5 Mistakes I Made When Starting My First React Project","author":"Richard Oliver Bray","date":"March 10, 2023","format":false,"excerpt":"You know what it's like to pick up a new language or framework. Sometimes there\u2019s great documentation to help you find your way through it. But even the best documentation doesn\u2019t cover absolutely everything. And when you work with something that's new, you're bound to find a problem that doesn't\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/react-facepalm.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/react-facepalm.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/react-facepalm.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/react-facepalm.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/react-facepalm.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":307780,"url":"https:\/\/css-tricks.com\/working-with-mdx-custom-elements-and-shortcodes\/","url_meta":{"origin":273438,"position":1},"title":"Working With MDX Custom Elements and Shortcodes","author":"Agney Menon","date":"May 7, 2020","format":false,"excerpt":"MDX is a killer feature for things like blogs, slide decks and component documentation. It allows you to write Markdown without worrying about HTML elements, their formatting and placement while sprinkling in the magic of custom React components when necessary. Let\u2019s harness that magic and look at how we can\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/mdx.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":296135,"url":"https:\/\/css-tricks.com\/demonstrating-reusable-react-components-in-a-form\/","url_meta":{"origin":273438,"position":2},"title":"Demonstrating Reusable React Components in a Form","author":"Kingsley Silas","date":"October 2, 2019","format":false,"excerpt":"Components are the building blocks of React applications. It\u2019s almost impossible to build a React application and not make use of components. It\u2019s widespread to the point that some third-party packages provide you with components you can use to integrate functionality into your application. These third-party components tend to be\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/tetris-blocks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/tetris-blocks.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/tetris-blocks.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/tetris-blocks.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/tetris-blocks.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":285727,"url":"https:\/\/css-tricks.com\/the-circle-of-a-react-lifecycle\/","url_meta":{"origin":273438,"position":3},"title":"The Circle of a React Lifecycle","author":"Kingsley Silas","date":"April 23, 2019","format":false,"excerpt":"A React component goes through different phases as it lives in an application, though it might not be evident that anything is happening behind the scenes. Those phases are: mounting updating unmounting error handling There are methods in each of these phases that make it possible to perform specific actions\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/circle-of-react-lifecycle.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/circle-of-react-lifecycle.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/circle-of-react-lifecycle.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/circle-of-react-lifecycle.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/circle-of-react-lifecycle.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":332292,"url":"https:\/\/css-tricks.com\/3-approaches-to-integrate-react-with-custom-elements\/","url_meta":{"origin":273438,"position":4},"title":"3 Approaches to Integrate React with Custom Elements","author":"Caleb Williams","date":"January 15, 2021","format":false,"excerpt":"In my role as a web developer who sits at the intersection of design and code, I am drawn to Web Components because of their portability. It makes sense: custom elements are fully-functional HTML elements that work in all modern browsers, and the shadow DOM encapsulates the right styles with\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/react-recompose-hand.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":281513,"url":"https:\/\/css-tricks.com\/react-16-6-0-goodies\/","url_meta":{"origin":273438,"position":5},"title":"React 16.6.0 Goodies","author":"Kingsley Silas","date":"January 23, 2019","format":false,"excerpt":"React 16.6.0 was released October 2018 and with it came goodies that spice up the way we can develop with React. We\u2019re going to cover what I consider the best of those new goodies with examples of how we can put them to use in our work. React.memo() avoids unnecessary\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/react.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/251966"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=273438"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273438\/revisions"}],"predecessor-version":[{"id":273534,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273438\/revisions\/273534"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/268951"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=273438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=273438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=273438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}