Fragments in React – Jhey Tompkins – Medium

Introducing the new Fragment component in #reactjs 👋  #javascript #js

  • Think of any time that you’ve needed to wrap component content in a wrapper element.For example, you could do not the following before React@16class MyAwesomeComponent extends Component { render () { return ( liItem One/li liItem Two/li liItem Three/li ) }}You would have to wrap those elements.
  • 🤦‍class MyAwesomeComponent extends Component { render () { return ( span liItem One/li liItem Two/li liItem Three/li /span ) }}This is a simple example but there could be many scenarios where you need to wrap your content.
  • But if you prefer the idea of returning an Array go right ahead 👍class MyAwesomeComponent extends Component { render () { return [ liItem One/li, liItem Two/li, liItem Three/li, ] }}Fragment is a solution allowing you to return many elements from a component.
  • Great!Next, you can either import the Fragment component,import React, { Component, Fragment } from ‘react’or use it through the React object directly with React.Fragment.Now, whenever you need to wrap the content of a component and you don’t want to add an extra div or other wrapping element to the DOM,…
  • The content of the component will render as expected but without the wrapping 🎉 🎉import React, { Component, Fragment } from ‘react’class MyAwesomeComponent extends Component { render () { return ( Fragment liItem One/li liItem Two/li liItem Three/li /Fragment ) }}producesliItem One/liliItem Two/liliItem Three/liwith no unnecessary wrapping 😎That’s the basics…

Ever inspected the DOM in a React app? Ever greeted with what seems like a constant nesting of

s? Had to wrap the content of a component yourself? Even though it didn’t feel semantically correct…

Fragments in ReactSay “Goodbye” to unnecessary divception in the DOMEver inspected the DOM in a React app? Ever greeted with what seems like a constant nesting of divs? Had to wrap the content of a component yourself? Even though it didn’t feel semantically correct.Up until React@16 a component could only return a single element. Return more than one and you’d see a message like “Adjacent JSX elements must be wrapped in an enclosing tag”. This gave you two options, wrap the component content in a single element, or rethink the design. The former tends to be the quicker and easier solution, but not always semantically ideal. It can also lead to littering the DOM with “wrapper” elements. Hands up if you’ve ever wrapped the content of a component in a div or span ✋React@16.2 introduces the Fragment component.For those in camp TL;DR; upgrade to React@16.2 and instead of wrapping elements, use the Fragment component. It reduces littering of the DOM and will help you keep your markup semantic and relevant 🎉Why Fragment?It’s not uncommon for a component to return more than one element. Before React@16, those elements would need wrapping though. Think of any time that you’ve needed to wrap component content in a wrapper element.For example, you could do not the following before React@16class MyAwesomeComponent extends Component { render () { return ( liItem One/li liItem Two/li liItem Three/li ) }}You would have to wrap those elements. In the above example, a ul or ol seems like the right choice…

Fragments in React – Jhey Tompkins – Medium