I can imagine that everyone of us – working with React on a daily basis – knows the feeling of wrapping your markup with a completely unneeded div tag just to make React happy.

From now we have a <> tag, which is in fact a fragment, and a corresponding closing tag </>, and their use case is exactly the same when you had to wrap your elements with a div before returning in render method.

So instead of doing this:



1
2
3
4
5
&lt;div&gt;

    &lt;img src ="..." /&gt;

    &lt;img src ="..." /&gt;

    &lt;img src ="..." /&gt;

&lt;/div&gt;

You can do this:



1
2
3
4
5
&lt;&gt;

    &lt;img src ="..." /&gt;

    &lt;img src ="..." /&gt;

    &lt;img src ="..." /&gt;

&lt;/&gt;

If the syntax looks weird to you (well, it is to me), you can use the longer form of <> which is <React.Fragment>.

Fragments also support keyed components, so it is possible to do the following, without introducing any new HTML markup:



1
2
3
4
5
6
{imagePairs.map(item =&gt; (

    &lt;React.Fragment key={item.id}&gt;

      &lt;img src={item.imageUrl} /&gt;

      &lt;p&gt;{item.description}&lt;/p&gt;

    &lt;/React.Fragment&gt;

))}

Installation

I have already started upgrading my projects to the latest version so you should too!



1
yarn add react@^16.0.0 react-dom@^16.0.0

Enjoy!

matwrites.com