If you are new to react, you will face this issue at some point.

If you probably reached this page via google search or any other search engine.

You are right place. I got you.

The common usecase or pattern for this issue is having multiple parent element in our JSX element or code.

Example:

function NavBar() {
    return (
        <h1>Intro site</h1>
        <ul>
            <li>Menu</li>
            <li>Profile</li>
            <li>Contact</li>
        </ul>
    )
}

Here we have both h1 and ul tag in the same level. Both are at parent level of whole component.

React will expect only one tag as parent tag. That doesn’t mean you have this kind of structure at all.

It expects us to surrond the component of same level tag with another tag.

So to resolve it we can surrond the elements with another div element.

Example

function NavBar() {
    return (
        <div>
            <h1>Intro site</h1>
            <ul>
                <li>Menu</li>
                <li>Profile</li>
                <li>Contact</li>
            </ul>
        </div>
    )
}

That’s it.
Happy Coding!