<> vs React.Fragment

<> is the shorthand tag for React.Fragment which allows us to group a list of elements without wrapping them in a new node.

So we can do something like

render() {
return (
<Header />
<Navigation />
<Main />
<Footer />

The only difference between them is that the shorthand version does not support the key attribute.

Here is a common example that inserts new line (br) tags in a multiple lines string:

str.split('\\n').map((item, index) => {
return (
<Fragment key={index}>