JSX expressions must have one parent element in React

Are you seeing the error “JSX expressions must have one parent element” in your React code? This error occurs when a component returns multiple elements at the same level, which is not allowed in React.

In this article, we’ll go through the different approaches you can take to solve this error, including using fragments, wrapper elements, and arrays. We’ll also cover the cause of the error and how to avoid it in the future.

What Causes the “JSX expressions must have one parent element” Error?

The “JSX expressions must have one parent element” error occurs when a component returns multiple elements at the same level. This is because it’s the invalid syntax to return multiple values from a function in JavaScript, and since React components are just functions, the same rule applies.

[Fixed]: TypeScript: Cannot use import statement outside a module

Here’s an example of code that would cause this error:

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

In this example, the App component returns two h2 elements at the same level, which is not allowed.

How to Solve the “JSX expressions must have one parent element” Error?

So, how can you fix this error? There are a few different approaches you can take. Let’s go through each of them in detail.

Using Fragments

One way to solve the error is to use a fragment, which allows you to group a list of children elements without adding any extra nodes to the DOM.

Here’s an example of how to use a fragment:

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

You can also use the more verbose syntax of fragments:

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

Fragments are a helpful tool when you need to group a list of children elements without adding any extra markup to the DOM.

Using a Wrapper Element

Another approach is to wrap your child elements in another DOM element, such as a div. This works as long as adding the extra div doesn’t break your layout.

Here’s an example of how to use a wrapper element:

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

This solution works because instead of returning multiple elements, we’re now returning a single div element that contains multiple children.

Handling Conditionals

You may also encounter the “JSX expressions must have one parent element” error when using conditionals if one of the code paths returns multiple elements at the same level.

Here’s an example of how this error might occur:

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

In this example, the truthy path of the ternary operator returns two elements at the same level, causing the error.

To solve this problem, you can wrap the two elements with a fragment:

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

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

Using an Array

An alternative approach is to group the elements into an array. This is often used when rendering a list of items, such as in a loop.

Here’s an example of how to use an array:

export default function App() {  const items = ['One', 'Two', 'Three'];  return (    <div>      {items.map(item => (        <h2>{item}</h2>      ))}    </div>  );}

In this example, we’re mapping over an array of items and rendering an h2 element for each item. The array serves as a single parent element for all of the h2 elements.

Conclusion

To summarize, if you’re seeing the error “JSX expressions must have one parent element” in your React code, you can solve it by using a fragment, a wrapper element, or an array.

By understanding the cause of this error and knowing how to fix it, you’ll be better equipped to write clean and efficient React code.

I hope this article has been helpful in solving this common error in React. If you have any questions or comments, please let me know in the comments section below.