How to fix JSX expressions must have one parent element in React

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

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs