React.Fragment, alias <>

En règle générale, une fonction utilisée en contexte JSX (par exemple, le rendu d'un composant) ne peut renvoyer qu'un unique bloc JSX :

Incorrect :

export function MonComposant () {
  return (
    <h1>Titre</h1>
    <h2>Sous-titre</h2>
  )
}

Correct : il faut entourer les deux balises à l'aide d'une balise englobante, par exemple <div> :

export function MonComposant () {
  return <div>
    <h1>Titre</h1>
    <h2>Sous-titre</h2>
  </div>;
}

Q : Mais que faire quand on ne peut pas (ou ne veut pas) ajouter une balise ?

R : utiliser le composant React.Fragment, qui peut s'abréger en <>.... Ce composant ne génère rien en sortie :

import React from "react";

export function MonComposant () {
  return <React.Fragment>
    <h1>Titre</h1>
    <h2>Sous-titre</h2>
  </React.Fragment>;
}

export function MonComposant () {
  return <>
    <h1>Titre</h1>
    <h2>Sous-titre</h2>
  </>;
}