Jsx expressions must have one parent element как исправить

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.

New to React? Beware of this error! 🚧 Learn how to fix it here 👇Click to Tweet

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

function App() {
    return (
        <React.Fragment>
            <h1>Hello, world!</h1>
            <p>This is a paragraph.</p>
       </React.Fragment>
    )
}

function App() {
    return (
        <div>
            {condition ? (
                <h1>Heading 1</h1>
                <p>Paragraph 1</p>
                        ) : (
                <h2>Heading 2</h2>
                <p>Paragraph 2</p>
            )}
        </div>
    )
}

function App() {
    return (
        <div>
            {condition ? (
                <>
                    <h1>Heading 1</h1>
                   <p>Paragraph 1</p>
                </>
            ) : (
                <>
                    <h2>Heading 2</h2>
                    <p>Paragraph 2</p>
                </>
            )
            }
        </div>
    )
}

The error JSX expressions must have one parent element in React occurs when you do not guarantee encapsulation of a component with a parent element. This article will give you solutions to this error with detailed code examples.

The reason for the error JSX expressions must have one parent element in React

This error occurs when you leave the tags discrete in a React function component or a React class component without being wrapped by a parent tag. This will lose the encapsulation of a component, so the IDE will give us an error like the example below.

Code:

import React from 'react';

const App = () => {
    return (
        <div id="header">Header</div>
        <div id="content">Content</div>
        <div id="footer">Footer</div>
    );
};

export default App;

Output:

As in the example above, we are leaving three discrete div tags in the JSX file, so when pointing to any div tag, the error JSX expressions must have one parent element in React will appear. Follow along to the next part of the article to know the solutions to this error

How to fix this error

Wrapping JSX element in an enclosing tag

This way, we can enclose tags in JSX such as <>, <React.fragment>. Here are some tags used to wrap the child tags to ensure the encapsulation of the React component. Let’s see how we use it in the code examples below.

Code:

import React from "react";

const App = () => {
    return (
        <>
            <div id="header">Header</div>
            <div id="content">Content</div>
            <div id="footer">Footer</div>
        </>
    );
};

export default App;

import React from "react";

const App = () => {
    return (
        <React.Fragment>
            <div id="header">Header</div>
            <div id="content">Content</div>
            <div id="footer">Footer</div>
        </React.Fragment>
    );
};

export default App;

Output:

Fragments are a typical pattern introduced since React 16 was born. It allows you to return multiple elements from a component without generating unnecessary DOM elements. The effect of the empty <> tag is the same as that of the Fragment. I recommend using these two tags instead of a <div> tag to avoid creating unnecessary ones.

Putting elements into an array

In this way, we will put the child elements into an array. The program will automatically recognize the array and render each element in turn inside this array of elements. Let’s see how we use arrays to prevent the error JSX expressions must have one parent element in React in the following code.

Code:

import React from "react";

const App = () => {
    return [
        <div id="header">Header</div>,
        <div id="content">Content</div>,
        <div id="footer">Footer</div>,
    ];
};

export default App;

We need to use square brackets [] to enclose the HTML elements, and we have an array of elements. The code, after being fixed, will no longer have the error that JSX expressions must have a parent element in React. Good luck with the methods mentioned in the article.

Summary

In summary, the article has told you some solutions to the error JSX expressions must have one parent element in React. However, I recommend you to use wrapping JSX element in an enclosing tag solution because it is easier to use