JIYIK CN >

React.js error "JSX expression must have a parent element" occurs when a component returns multiple elements. To resolve the error, wrap the elements in a parent divelement or use a fragment, for example <><h2>One</h2><h2>Two</h2></>.

Here is an example that produces the above error

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

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

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

One way to fix the error is to use react fragments.

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

Fragments are used when we need to group sublists without adding extra nodes to the DOM.

We may also see a more verbose snippet syntax used.

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

Most code editors now support a more concise syntax.

Another solution is to wrap our child element in another DOM element, such as a div.

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

This resolves the error because divinstead of returning multiple elements we are now returning a single element with multiple children.

This approach only works if adding additional divwill not break our layout, otherwise use fragments as fragments do not add any extra markup to the DOM.

We might also see errors occur in conditional statements if one of the code paths returns multiple elements at the same level.

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 sibling elements, causing the error. We can fix this by wrapping the two elements with a fragment.

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

Now every code path of the ternary returns a value.

The reason for the "JSX expression must have a parent element" error is that the syntax for returning multiple values ​​from a function is invalid.

React components are just functions, so when we return multiple elements at the same level, we are actually using multiple returnstatements at the same level in a function.

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

The second returnstatement is not accessible; it is invalid syntax.

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

Another approach we might look at is to group the elements into an array.

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, but we need to pass a unique key prop to each array element.

This is unnecessary and should be avoided, as the snippet syntax is more readable and intuitive.

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