Adjacent JSX elements must be wrapped in an enclosing tag

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.

React issue

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!

Microsoft MVP award

I’ve been awarded as Microsoft MVP. This is second time in a row. For the first time, i didn’t wrote any blog post since it was pandemic and lockdown time.

But this time, i feel more special and energetic. I’m passing all good vibes to my friends and family.

Looking forward to contribute more to community and learn as well.

To know more about mvp award program please check this link https://mvp.microsoft.com/

And also following goodies from Microsoft for past year contribution. All came together, what a co incident and surprise.

One advice i always give to myself. When life gives you opportunity, use it wisely ✌️

Happy sharing!