Fragments

Il est courant qu'un composant React contienne plusieurs éléments. Cependant les éléments JSX ne peuvent contenir qu'un seul élément parent.

✅

const element = (
  <div class="wrapper">
    <Blue>Marshall Mathers</Blue>
    <Blue>Eminem</Blue>
  </div>
)

🚫

const element = (
  <Blue>Marshall Mathers</Blue>
  <Blue>Eminem</Blue>
)

Ce qui est logique puisque la méthode createElement de React API est appelée et ne s'attend qu'a recevoir qu'un seul élément:

React.createElement(element, null)

Cependant, il n'est pas toujours possible/souhaitable d'avoir une balise parent englobant tous nos composants. Heureusement, les fragments permettent de remédier à ce problème.

👌

const element = (
  <React.fragment>
    <Blue>Marshall Mathers</Blue>
    <Blue>Eminem</Blue>
  </React.fragment>
)

Syntaxe courte

Le code précédent peut être réécrit de façon plus courte avec la syntaxe courte, comme suit:

const element = (
  <>
    <Blue>Marshall Mathers</Blue>
    <Blue>Eminem</Blue>
  </>
)

Ce qui produira exactement le même code qu'avec <React.fragment>.