Comment corriger « Les expressions JSX doivent avoir un élément parent » dans React

JSX, qui signifie JavaScript XML, est une extension syntaxique pour React qui permet aux développeurs d’écrire du code de type HTML dans leurs fichiers JavaScript.

Lorsqu’ils travaillent avec JSX, les débutants rencontrent souvent une erreur courante qui dit : « Les expressions JSX doivent avoir un élément parent ». Cette erreur se produit lorsque plusieurs éléments sont renvoyés dans une seule expression sans être enveloppés dans un élément parent.

Cette erreur est également très similaire à l’erreur « Les éléments JSX adjacents doivent être enveloppés dans une balise englobante ». Vouliez-vous un fragment JSX <>…</> ? ».

Dans cet article, vous apprendrez les différentes solutions que vous pouvez utiliser pour éviter ce barrage commun lorsque vous travaillez avec React.

Quelle est la cause de l’erreur « Les expressions JSX doivent avoir un élément parent » ?

En JSX, il existe une règle qui stipule que l’expression doit toujours retourner un seul élément. Cette règle s’applique à React, ce qui signifie que chaque composant ne peut renvoyer qu’un seul élément racine.

En effet, lorsque vous effectuez le rendu d’un composant, React crée un arbre DOM virtuel correspondant à l’HTML qui sera finalement rendu sur la page. S’il y a plusieurs éléments racine dans le JSX, React ne sait pas comment les gérer, ce qui entraine l’erreur « Les expressions JSX doivent avoir un seul élément parent » ou « Les éléments JSX adjacents doivent être enveloppés dans une balise englobante ». Vouliez-vous un fragment JSX <>…</> ? »

Par exemple, si vous essayez de rendre le code JSX suivant :

function App() {
    return (
        <h1>Hello, world!</h1>
        <p>This is a paragraph.</p>
    )
}

Vous obtiendrez l’erreur « Les expressions JSX doivent avoir un élément parent » :

Ou l’erreur « Les éléments JSX adjacents doivent être enveloppés dans une balise englobante. Vouliez-vous un fragment JSX <>…</> ? » :

Cela est dû au fait que deux éléments racine (<h1> et <p> ) sont renvoyés.

JSX fonctionne de la même manière qu’une fonction, car les fonctions ne peuvent pas renvoyer de valeurs multiples (sauf si elles sont incluses dans un tableau, qui est considéré comme une valeur unique).

function myFunc() {
  return value1;
  return value2;
}

La deuxième instruction de retour de la fonction render est inaccessible parce que la première instruction de retour sera toujours exécutée, ce qui rend impossible l’exécution de la seconde.

3 façons de corriger l’erreur « Les expressions JSX doivent avoir un élément parent »

Il existe trois méthodes principales pour corriger cette erreur :

• Utiliser un Div Wrapper
• Utiliser un fragment (<> et </>)
• Utiliser le composant React.Fragment

1. Envelopper tous les éléments avec un Div Wrapper

L’une des solutions les plus simples à l’erreur « Les expressions JSX doivent avoir un seul élément parent » consiste à envelopper les multiples éléments JSX dans un seul élément parent, tel qu’un <div>.

Cela vous permet de regrouper et de rendre les éléments comme une seule unité. Par exemple, considérez le composant ci-dessous :

function App() {
    return (
        <div>
            <h1>Hello, world!</h1>
           <p>This is a paragraph.</p>
        </div>
    )
}

Dans cet exemple, les éléments <h1> et <p> sont enveloppés dans un élément <div>, qui sert d’élément parent.

2. Envelopper tous les éléments avec un fragment

Une autre façon de résoudre le problème « Les expressions JSX doivent avoir un élément parent » ou « Les éléments JSX adjacents doivent être enveloppés dans une balise englobante ». Vouliez-vous un fragment JSX <>…</> ? » consiste à utiliser un fragment JSX.

Un fragment est une fonctionnalité intégrée de React qui vous permet de regrouper une liste d’enfants sans ajouter de nœuds supplémentaires au DOM. Vous pouvez utiliser un fragment pour envelopper plusieurs éléments dans un seul élément parent sans ajouter de nœud DOM supplémentaire au rendu HTML. Par exemple, voici un composant :

function App() {
    return (
        <>
            <h1>Hello, world!</h1>
            <p>This is a paragraph.</p>
        </>
    )
}

Dans cet exemple, un fragment JSX (<> et </>) est utilisé pour envelopper les éléments multiples. Ce fragment agit comme un élément parent.

3. Envelopper tous les éléments avec React.Fragment

Enfin, une autre façon de corriger l’erreur « Les expressions JSX doivent avoir un élément parent » est d’utiliser le composant React.Fragment au lieu d’un élément normal de type régulier.

Cela fonctionne de manière similaire à l’utilisation d’un fragment JSX, mais c’est un peu plus explicite et peut être utile si vous voulez donner à votre élément parent une clé spécifique ou d’autres accessoires. Par exemple, voici un composant :

function App() {
    return (
        <React.Fragment>
            <h1>Hello, world!</h1>
            <p>This is a paragraph.</p>
       </React.Fragment>
    )
}

Dans cet exemple, le composant React.Fragment est utilisé à la place d’un composant classique pour ce qui vous permet de regrouper les éléments sans ajouter de nœud supplémentaire au code HTML rendu.

Le composant React.Fragment vous demandera d’importer React. Il vous permet également d’ajouter des props, ainsi que className, style, et id au fragment lui-même, ce qui est utile lorsque vous souhaitez appliquer des styles ou d’autres attributs au groupe d’éléments à l’intérieur du fragment.

Comment corriger l’erreur « Les expressions JSX doivent avoir un élément parent » dans les conditionnelles

Lorsque vous travaillez avec des instructions conditionnelles utilisant les opérateurs ternaires dans React, il est courant de rencontrer le message d’erreur « Les expressions JSX doivent avoir un élément parent » ou « Les éléments JSX adjacents doivent être enveloppés dans une balise englobante ». Vouliez-vous un fragment JSX <>…</> ? ».

Cela se produit lorsque plusieurs éléments sont renvoyés à l’intérieur d’une déclaration conditionnelle. Dans ce cas, React ne sera pas en mesure de les rendre correctement, et il en résultera l’une ou l’autre des erreurs.

function App() {
    return (
        <div>
            {condition ? (
                <h1>Heading 1</h1>
                <p>Paragraph 1</p>
                        ) : (
                <h2>Heading 2</h2>
                <p>Paragraph 2</p>
            )}
        </div>
    )
}

Vous pouvez corriger cette erreur avec l’une des trois méthodes expliquées dans cet article. De préférence, vous pouvez utiliser le fragment React (<> et </>) ou l’élément <div>.

function App() {
    return (
        <div>
            {condition ? (
                <>
                    <h1>Heading 1</h1>
                   <p>Paragraph 1</p>
                </>
            ) : (
                <>
                    <h2>Heading 2</h2>
                    <p>Paragraph 2</p>
                </>
            )
            }
        </div>
    )
}

Résumé

L’erreur « Les expressions JSX doivent avoir un élément parent » ou « Les éléments JSX adjacents doivent être enveloppés dans une balise englobante ». Vouliez-vous un fragment JSX <>…</> ? » est un obstacle courant auquel les débutants sont confrontés lorsqu’ils apprennent React.

L’utilisation d’un wrapper <div> est la solution la plus simple, mais elle peut ajouter des divs inutiles au DOM. Les fragments offrent une solution plus propre sans ajouter de nœuds supplémentaires au DOM.

À vous de jouer : Avez-vous déjà rencontré ce problème ? Comment l’avez-vous résolu ? Avez-vous utilisé d’autres approches qui n’ont pas été abordées dans cet article ? Faites-nous en part dans les commentaires !