JSX expressions must have one parent element in React

avatar
Borislav Hadzhiev

Last updated: Jan 15, 2023
3 min

banner

# 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.

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).

# Use a React Fragment to solve the error

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> </> ); }

use react fragment to solve the error

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 child elements without adding extra nodes to the DOM.

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

# Wrap your components in another DOM element

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> ); }

wrap your components in another dom element

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.

# The error also occurs in conditionals

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> ); }

solve error in conditionals

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

The cause of the error is that it is invalid syntax to return multiple values from a function.

# React components are just functions

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.

# Returning multiple elements in an array

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> </> ); }

fragment syntax is more readable

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.