JSX in depth: Fragments in short

What’s JSX?

JSX is a syntax extension to JavaScript. JSX produces React “elements”. If you’re not familiar with JSX, please consider to go through this React blog post before you continue to read this one. In this post, I will try to explain fragments in JSX as one advanced, but also easy-to-use concept in React.

Fragments

As React documentation says:

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

The simplest example

Fragments are used to replace “parent” JSX tag, when we don’t want it at all. Below, you can find the simplest example of using Fragments. In this example, we have three divs in component, but however, we want just these three divs to display, when user render that component.

class ThreeDivsFragments extends React.Component {
render() {
return (
<React.Fragment>
<div>First</div>
<div>Second</div>
<div>Third</div>
</React.Fragment>
);
}
}

As you see, we’re using React.Fragment as holder for those three divs. If you know some basic stuffs regarding JSX, you know that JSX must contain one parent element to hold all children, and it’s usually looks like this:

class ThreeDivsOrdinary extends React.Component {
render() {
return (
<div>
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>
);
}
}

Now, let’s consider rendering of this component called ThreeDivs in both cases and see what’s output looks like in both cases.

<ThreeDivsFragments />
/* This returns ->
---------------------------------------
<div>First</div>
<div>Second</div>
<div>Third</div>
---------------------------------------
*/
<ThreeDivsOrdinary />
/* This returns ->
--------------------------------------
<div>
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>
--------------------------------------
*/

And as you can see, ordinary usage of JSX require one more parent div. If we don’t want it, we should use React.Fragment. However, the biggest motivation for React develops to create Fragments was exactly to return a list of children — without any parent element. In React documentation, there’s one great example of using Fragments:

class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}

And only with usage of Fragments, we can make 100% correct table HTML markup like:

<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>

Short syntax for Fragments is <>, so Columns component can also looks like:

class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}

Also, Fragments can have key attribute. A use case for this is mapping a collection to an array of fragments — for example, to create a description list. There’s an example in React documentation for this:

function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// Without the `key`, React will fire a key warning
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}

Conclusion

By using Fragments, you can avoid to create unnecessary parent elements to list of children. Also, it can help you to avoid many CSS problems regarding CSS selectors. It’s really simple to use, but you can save a lot of time using this concept, so I recommend to use it.


Originally published at milosristic.com on August 6, 2018.