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 <div>
<img src ="..." />
<img src ="..." />
<img src ="..." />
</div>
You can do this:
1
2
3
4
5 <>
<img src ="..." />
<img src ="..." />
<img src ="..." />
</>
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 => (
<React.Fragment key={item.id}>
<img src={item.imageUrl} />
<p>{item.description}</p>
</React.Fragment>
))}
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!