Code Beautifier
Adjacent JSX elements must be wrapped in an enclosing tag

Fix "Adjacent JSX elements must be wrapped" in React

A component can return only one root element. Why two top-level siblings fail to compile, what a fragment is, and when a wrapper div is the wrong fix.

Input that triggers it

<h1>Title</h1>
<p>Intro paragraph.</p>
Open HTML to JSX on its own page
Draft saved locally.

Local workspace

Named projects in IndexedDB · Local only — never synced to our servers. Worksp…

Open manager

Batch workspace

Format multiple files locally in one run.

html
JSXjsx

What the error means

JSX is syntax for a function call: <h1>Title</h1> compiles to a single createElement (or jsx) call that returns one element. A function can return one value, so a return statement — or an arrow body, or a ternary branch — that contains two elements side by side has nowhere to put the second one. The compiler stops with Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? and points at the start of the second element.

The example is two sibling elements with no parent. As HTML it is perfectly normal; as the body of a React component it will not compile.

Why it happens

  • Converting a snippet of HTML that was a fragment of a larger page, so it has several top-level nodes.
  • Returning two elements from a component without a wrapper, often after deleting a container during a refactor.
  • A ternary or && expression whose branch contains two elements: cond ? <A /><B /> : null.
  • Text next to an element at the top level, which counts as two children too.

How to fix it

  1. Paste the HTML into the converter above. When the markup has more than one root node, the output is wrapped in a fragment automatically, which is the correct default: a fragment groups children without adding a DOM node.
  2. If the markup semantically is a single block — a card, a form — a real container (<section>, <div>) may be better than a fragment, because you will probably want to style or position it. Use the wrapper the HTML would have had.
  3. Avoid the reflex of wrapping everything in a <div>: it changes the DOM, breaks layouts that depend on direct children (flex and grid containers, table rows, list items), and produces invalid HTML inside <tr> or <ul>.
  4. For a ternary branch, wrap just that branch: cond ? <><A /><B /></> : null.

The converted example:

<>
  <h1>Title</h1>
  <p>Intro paragraph.</p>
</>

If it still fails

  • Fragments with a key — needed when mapping a list to several elements — must use the long form: <Fragment key={id}>...</Fragment>.
  • Some older tooling does not support the <> short syntax; import Fragment from React and use it explicitly.
  • Whitespace between two elements is not a third child in JSX (unlike text), but a stray character or a comment outside {/* */} is; HTML Formatter makes the structure visible before conversion.

Related errors