JSX, wat staat voor JavaScript XML, is een syntaxextensie voor React waarmee ontwikkelaars HTML-achtige code kunnen schrijven in hun JavaScript-bestanden.

Tijdens het werken met JSX komen beginners vaak een veel voorkomende fout tegen die zegt: “JSX expressions must have one parent element”. Deze fout treedt op wanneer meerdere elementen worden geretourneerd in een enkele expressie zonder te zijn verpakt in een parent element.

Deze fout lijkt ook erg op de “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” fout.

In dit artikel leer je de verschillende oplossingen die je kunt gebruiken om deze veelvoorkomende drempels bij het werken met React te vermijden.

Wat veroorzaakt de “JSX expressions must have one parent element” fout?

In JSX is er een regel die zegt dat het altijd een enkel element moet teruggeven. Deze regel is van toepassing op React, wat betekent dat elk component slechts één basiselement kan retourneren.

Dit komt omdat React, wanneer je een component rendert, een virtuele DOM tree maakt die overeenkomt met de HTML die uiteindelijk naar de pagina wordt gerenderd. Als er meerdere root-elementen in de JSX zitten, weet React niet hoe ze daarmee om moeten gaan, wat resulteert in de foutmelding “JSX expressions must have one parent element” of “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?”

Als je bijvoorbeeld de volgende JS-code probeert te renderen:

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

Dan krijg je de foutmelding “JSX expressions must have one parent element”:

JSX expressions must have one parent element error message
JSX expressions must have one parent element error

Of de fout “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” fout:

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? error message
Aangrenzende JSX-elementen moeten in een omsluitende tag worden gewikkeld. Wilde je een JSX fragment <>…</>?

Dit komt omdat er twee root-elementen (<h1> en <p> worden geretourneerd.

JSX werkt op dezelfde manier als een functie, omdat functies niet meerdere waarden kunnen retourneren (tenzij ze zijn ingesloten in een array, wat wordt beschouwd als een enkele waarde).

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

Het tweede return statement in de render functie is onbereikbaar omdat het eerste return statement altijd wordt uitgevoerd, waardoor het onmogelijk is om het tweede return statement uit te voeren.

Drie manieren om de “JSX expressions must have one parent element” fout op te lossen

Er zijn drie manieren om deze fout op te lossen:

  • Een Div Wrapper gebruiken
  • Een fragment gebruiken (<> en </>)
  • React.Fragment component gebruiken

1. Alle elementen wrappen met een Div Wrapper

Een van de meest eenvoudige oplossingen voor de fout “JSX expressions must have one parent element” is om de meerdere JSX elementen in een enkel parent element te wrappen, zoals een <div>.

Door dit te doen kun je de elementen groeperen en renderen als een enkele unit. Bekijk bijvoorbeeld het onderstaande component:

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

In dit voorbeeld zijn de elementen <h1> en <p> gewrapt in een <div> element, dat dient als parent element.

2. Alle elementen wrappen met een fragment

Een andere manier om de “JSX expressions must have one parent element” of “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” fout is om een JSX Fragment te gebruiken.

Een Fragment is een ingebouwde functie van React waarmee je een lijst met children kunt groeperen zonder extra nodes aan het DOM toe te voegen. Je kunt een Fragment gebruiken om meerdere elementen in een enkel parent element te wrappen zonder een extra DOM node toe te voegen aan de gerenderde HTML. Hier is bijvoorbeeld een component:

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

In dit voorbeeld wordt een JSX Fragment (<> en </>) gebruikt om de meerdere elementen te wrappen. Dit Fragment fungeert als een parent element.

3. Alle elementen wrappen met React.Fragment

Tot slot is er nog een andere manier om de fout “JSX expressions must have one parent element” op te lossen door het component React.Fragment te gebruiken in plaats van een regulier element.

Dit werkt hetzelfde als het gebruik van een JSX Fragment, maar het is iets explicieter en kan handig zijn als je je parent element een specifieke sleutel of andere props wilt geven. Hier is bijvoorbeeld een component:

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

In dit voorbeeld wordt de React.Fragment component gebruikt in plaats van een gewoon element om als parent element te dienen. Het wrapt meerdere elementen binnen de tags, waardoor je de elementen kunt groeperen zonder een extra node toe te voegen aan de gerenderde HTML.

Het React.Fragment component vereist dat je React importeert. Je kunt er ook props mee toevoegen, en ook className, style, en id aan het fragment zelf, wat handig is als je stijlen of andere attributen wilt toepassen op de groep elementen binnen het fragment.

Hoe de “JSX expressions must have one parent element” fout in conditionals oplossen

Bij het werken met conditionele statements met behulp van de ternaire operatoren in React, komt het vaak voor dat je de foutmelding “JSX expressions must have one parent element” of “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?”.

Dit gebeurt wanneer meerdere elementen worden geretourneerd vanuit een voorwaardelijk statement. In dat geval kan React ze niet correct renderen en dat resulteert in een van de fouten.

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

Je kunt deze fout oplossen met een van de drie methoden die in dit artikel worden uitgelegd. Bij voorkeur gebruik je het React fragment (<> en </>) of <div> element.

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

Samenvatting

De fout “JSX expressions must have one parent element” of “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” is een veel voorkomende wegversperring waar beginners tegenaan lopen bij het leren van React.

Het gebruik van een <div> wrapper is de eenvoudigste oplossing, maar het kan onnodige divs toevoegen aan het DOM. Fragmenten bieden een strakkere oplossing zonder extra nodes aan de DOM toe te voegen.

Nu is het jouw beurt: Ben jij dit probleem ooit tegengekomen? Hoe heb je het opgelost? Zijn er andere benaderingen die je hebt gebruikt en die niet in dit artikel zijn behandeld? Laat het ons weten in de comments!