JSX, which stands for JavaScript XML, is a syntax extension for React that allows developers to write HTML-like code in their JavaScript files.
While working with JSX, beginners often encounter a common error that says, “JSX expressions must have one parent element”. This error occurs when multiple elements are returned in a single expression without being wrapped in a parent element.
This error is also very similar to the “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” error.
In this article, you will learn the different solutions that you can use to avoid this common roadblock when working with React.
What Causes the “JSX expressions must have one parent element” Error?
In JSX, there is a rule that states that it must always return a single element. This rule applies to React, which means that every component can only return a single root element.
This is because when you render a component, React creates a virtual DOM tree corresponding to the HTML that is ultimately rendered to the page. If there are multiple root elements in the JSX, React doesn’t know how to handle them, which results in the “JSX expressions must have one parent element” error or “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?”
For example, if you try to render the following JSX code:
function App() {
return (
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
)
}You’ll get the “JSX expressions must have one parent element” error:
Or the “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” error:
This is because two root elements (<h1> and <p> are returned.
JSX operates similarly to a function because functions cannot return multiple values (unless they are enclosed in an array, which is considered a single value).
function myFunc() {
return value1;
return value2;
}The second return statement in the render function is unreachable because the first return statement will always execute, making it impossible for the second one to be executed.
3 Ways To Fix the “JSX expressions must have one parent element” Error
There are three major ways to fix this error, these methods are:
- Using a Div Wrapper
- Using a Fragment (<> and </>)
- Using React.Fragment component
1. Wrap All Element With a Div Wrapper
One of the most straightforward solutions to the “JSX expressions must have one parent element” error is to wrap the multiple JSX elements in a single parent element, such as a <div>.
Doing this lets you group and render the elements as a single unit. For example, consider the component below:
function App() {
return (
<div>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</div>
)
}In this example, the <h1> and <p> elements are wrapped in a <div> element, which serves as the parent element.
2. Wrap All Element With a Fragment
Another way to fix the “JSX expressions must have one parent element” or “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” error is to use a JSX Fragment.
A Fragment is a built-in feature of React that allows you to group a list of children without adding extra nodes to the DOM. You can use a Fragment to wrap the multiple elements in a single parent element without adding an extra DOM node to the rendered HTML. For example, here is a component:
function App() {
return (
<>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</>
)
}In this example, a JSX Fragment (<> and </>) is used to wrap the multiple elements. This Fragment acts as a parent element.
3. Wrap All Element With React.Fragment
Finally, another way to fix the “JSX expressions must have one parent element” error is to use the React.Fragment component instead of a regular element.
This works similarly to using a JSX Fragment, but it’s a bit more explicit and can be useful if you want to give your parent element a specific key or other props. For example, here is a component:
function App() {
return (
<React.Fragment>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</React.Fragment>
)
}In this example, the React.Fragment component is used instead of a regular element to serve as the parent element. It wraps multiple elements inside the <></> tags, which allows you to group the elements together without adding an extra node to the rendered HTML.
The React.Fragment component will require you to import React. It also allows you to add props, and also className, style, and id to the fragment itself, which is useful when you want to apply styles or other attributes to the group of elements within the fragment.
How To Fix the “JSX expressions must have one parent element” Error in Conditionals
When working with conditional statements using the ternary operators in React, it’s common to encounter the error message “JSX expressions must have one parent element” or “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?”.
This happens when multiple elements are returned from within a conditional statement. In that case, React won’t be able to render them correctly, and it will result in either of the errors.
function App() {
return (
<div>
{condition ? (
<h1>Heading 1</h1>
<p>Paragraph 1</p>
) : (
<h2>Heading 2</h2>
<p>Paragraph 2</p>
)}
</div>
)
}You can fix this error with any of the three methods explained in this article. Preferably you can use the React fragment (<> and </>) or <div> element.
function App() {
return (
<div>
{condition ? (
<>
<h1>Heading 1</h1>
<p>Paragraph 1</p>
</>
) : (
<>
<h2>Heading 2</h2>
<p>Paragraph 2</p>
</>
)
}
</div>
)
}Summary
The “JSX expressions must have one parent element” error or “Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?” is a common roadblock that beginners face when learning React.
Using a <div> wrapper is the easiest solution, but it can add unnecessary divs to the DOM. Fragments provide a cleaner solution without adding extra nodes to the DOM.
Now it’s your turn: Have you ever encountered this issue? How did you solve it? Are there any other approaches you used that are not covered in this article? Let us know in the comments!
