Rendering child elements in React using Fragments

One of the advantages of using React to render a user interface is that it’s easy to break up the UI into components. However, a common problem that arises is when we want to return sibling(if you don’t know what is sibling check here.) elements with no parent. React has a feature called Fragments that provides the solution.

The problem

If you aren’t familiar with the problem, consider this example.

function FAQ() {
return (
<p>What is React?</p>
<p>A JS library for building UI</p>
<p>How do I render sibling elements?</p>
<p>Use Fragments</p>
);
}

then you got this error:

Adjacent JSX elements must be wrapped in an enclosing tag.

The solutions

One option is to wrap the elements with a parent element.(something like div tag)

function FAQ() {
return (
<div>
<p>What is React?</p>
<p>A JS library for building UI</p>
<p>How do I render sibling elements?</p>
<p>Use Fragments</p>
</div>
);
}

But this method introduces an extraneous element into the DOM, adding an extra level of nesting that we don’t actually need.

React v16.0 introduced another option, which is to return an array of elements.

function FAQ() {
return [
<p>What is React?</p>
<p>A JS library for building UI</p>
<p>How do I render sibling elements?</p>
<p>Use Fragments</p>
];
}

Warning: Each child in a list should have a unique "key" prop.

Now we need to add commas in between elements. More importantly, this code produces a key warning: Adding a key to every element fixes the issue but is quite cumbersome.

function FAQ() {
return [
<p>What is React?</p>
<p>A JS library for building UI</p>
<p>How do I render sibling elements?</p>
<p>Use Fragments</p>
];
}

React v16.2 gave us a cleaner solution, which is to use Fragments.

function FAQ() {
return (
<React.Fragment>
<p>What is React?</p>
<p>A JS library for building UI</p>
<p>How do I render sibling elements?</p>
<p>Use Fragments</p>
</React.Fragment>
);
}

We no longer need to provide keys, we don’t need to add array commas, and we still avoid adding an extraneous DOM element because React.Fragment doesn’t become an actual element during rendering.

also We can import Fragment to avoid having to fully write out React.Fragment.

import React, {Fragment} from "react";

function FAQ() {
return (
<Fragment>
<p>What is React?</p>
<p>A JS library for building UI</p>
<p>How do I render sibling elements?</p>
<p>Use Fragments</p>
</Fragment>
);
}

an even better method is to use the shorthand syntax for Fragments, which looks like empty tags: <> and </>.

function FAQ() {
return (
<>
<p>What is React?</p>
<p>A JS library for building UI</p>
<p>How do I render sibling elements?</p>
<p>Use Fragments</p>
</>
);
}

This gives us the same benefits as using React.Fragment, but we don’t need to import anything else, and our code looks cleaner.

Warning: The only thing that the shorthand syntax doesn’t support for now is adding a key. This could be problematic if you are creating a description list, for example. In this case, use the standard syntax.

function Dictionary(props) {
return (
<dl>
{props.terms.map(({word, definition}) =>
<React.Fragment key={word}>
<dt>{word}</dt>
<dd>{definition}</dd>
</React.Fragment>
)}
</dl>
);
}

We need to provide a key to avoid a key warning.

Using Fragments:

In the last two years, the JavaScript ecosystem has added widespread support for Fragments.

If you upgrade your dependencies, you will probably be able to use Fragments without any additional configuration.

Good luck:)

Hello! My name’s Arvin. I’m a developer that loves simplifying things. I love breaking down complex problems into simple, easy to understand solutions.