JSX expressions must have one parent element in React

avatar

Borislav Hadzhiev

Last updated: Apr 5, 2022

banner

Photo from Unsplash

JSX expressions must have one parent element in React #

The React.js error "JSX expressions must have one parent element" occurs when a component returns multiple elements. To solve the error, wrap the elements in a parent div element or use a fragment, e.g. <><h2>One</h2><h2>Two</h2></>.

jsx expressions must have one parent element

Here is an example of how the error occurs.

App.js
export default function App() { // ⛔️ JSX expressions must have one parent element. return ( <h2>One</h2> <h2>Two</h2> ); }

The issue in the example above is that the App component returns multiple elements.

A component cannot return multiple elements, just like a function can't return multiple values (unless they're wrapped in an array, which is a single value).

One way to solve the error is to use a react fragment.

App.js
export default function App() { return ( <> <h2>One</h2> <h2>Two</h2> </> ); }

Fragments are used when we need to group a list of children without adding extra nodes to the DOM.

You might also see the more verbose syntax of fragments being used.

App.js
import React from 'react'; export default function App() { return ( <React.Fragment> <h2>One</h2> <h2>Two</h2> </React.Fragment> ); }

The two examples above achieve the same result - they group the list of children elements without adding extra nodes to the DOM.

The more concise syntax is more commonly used now that most code editors support it.

An alternative solution is to wrap your child elements in another DOM element, e.g. a div.

App.js
export default function App() { return ( <div> <h2>One</h2> <h2>Two</h2> </div> ); }

This solves the error because instead of returning multiple elements, we now return a single div element that contains multiple children.

This approach only works when adding an extra div doesn't break your layout, otherwise use a fragment, because fragments don't add any extra markup to the DOM.

You might also see the error occur in conditionals, if one of the code paths returns multiple elements at the same level.

App.js
export default function App() { return ( <div> {/* ⛔️ JSX expressions must have one parent element.ts(2657) */} {true ? ( <h2>One</h2> <h2>Two</h2> ) : null} </div> ); }

The truthy path of the ternary operator returns 2 elements at the same level, which caused the error. We can get around this by wrapping the two elements with a fragment.

App.js
export default function App() { return ( <div> {true ? ( <> <h2>One</h2> <h2>Two</h2> </> ) : null} </div> ); }

Now each code path of the ternary returns a single value.

The cause of the "JSX expressions must have one parent element" error is that it's invalid syntax to return multiple values from a function.

React components are just functions, so when we return multiple elements at the same level, we are effectively using multiple return statements at the same level of a function.

App.js
function render() { return React.createElement('h2', null, 'One'); return React.createElement('h2', null, 'Two'); }

The second return statement is unreachable and this is invalid syntax.

On the other hand, when we wrap the elements with a fragment or another element, the function only returns a single value, which solves the error.

An alternative approach that you might see is to group the elements into an array.

App.js
export default function App() { return [<h2 key={0}>One</h2>, <h2 key={1}>Two</h2>]; }

The array is a single value, so the error is resolved, however we are required to pass a unique key prop to each array element.

This is unnecessary and should be avoided as the fragment syntax is much more readable and intuitive.

App.js
export default function App() { return ( <> <h2>One</h2> <h2>Two</h2> </> ); }

Conclusion #

The React.js error "JSX expressions must have one parent element" occurs when a component returns multiple elements. To solve the error, wrap the elements in a parent div element or use a fragment, e.g. <><h2>One</h2><h2>Two</h2></>.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.