Adjacent JSX elements must be wrapped in an enclosing tag

by | Dec 1, 2023

Adjacent JSX elements must be wrapped in an enclosing tag

The error message “Adjacent JSX elements must be wrapped in an enclosing tag” in React indicates a violation of a key syntax rule. In React, when composing components with JSX, each component’s render method must return a single parent element. This is crucial for React to create a virtual DOM representation of the component.

Consider the following incorrect JSX structure:

1
2
3
// Incorrect
return <h1>Hello</h1>
       <p>World</p>;

In this example, <h1> and <p> are two adjacent JSX elements at the root level, not enclosed within a single parent element. React requires a cohesive structure to represent the component in the virtual DOM.

To address this issue, the JSX elements should be wrapped within a parent element, such as a <div> or <React.Fragment>. Here’s the corrected version using a <div>:

1
2
3
4
5
6
7
// Correct
return (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
);

Or using <React.Fragment>:

1
2
3
4
5
6
7
// Correct with React.Fragment
return (
  <>
    <h1>Hello</h1>
    <p>World</p>
  </>
);

By introducing a parent element, you create a single root for the JSX structure. The choice between <div> and <React.Fragment> depends on your specific use case. <React.Fragment> is particularly useful when you want to avoid introducing unnecessary DOM elements.

This correction ensures that React can properly manage the virtual DOM and maintain the structure of your components, allowing for efficient rendering and updates. Understanding and adhering to this rule is essential for writing valid and well-structured React components.

1 Comment

  1. Regi Salvador

    “Adjacent JSX elements must be wrapped in an enclosing tag” in React indicates a violation of a key syntax rule, and it drove me crazy until I fixed it. Thank you for sharing.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Looking For Something?

Follow Us

Related Articles

React 19: What’s New and How to Upgrade Your App

React 19: What’s New and How to Upgrade Your App

React has been a go-to JavaScript library for building user interfaces, and with its continuous evolution, it always brings in fresh updates and improvements to make our development process smoother. With the stable release of React v19, many exciting features have...

How to Upload File and Preview it Using Docx-Preview in React

How to Upload File and Preview it Using Docx-Preview in React

Overview of the Project How to Upload File and Preview it Using Docx-Preview in React Our goal is to create a form where users can upload a DOCX file. After the upload, the contents of the DOCX file will be previewed in a scrollable area. This feature is especially...

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!