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!

Next js experiment

Tried out an app with Next js with the help of an YouTube tutorial video. The app contains basic features like loading data from external api, single level routing, nested routing, layout templates, Hyperlink navigations, Card styles. Here is an outcome. https://next-experiment-six.vercel.app

Thanks @traversymedia

This video is really helpful. https://youtube.com/watch?v=mTz0GXj8NN0&ab_channel=TraversyMedia…

I shall try the Udemy course as well shortly.

Deployed the source in vercel by following the official docs steps. Live: https://next-experiment-six.vercel.app

Its quick and straight forward. I’m yet to figure out – how to trigger the build & deployment in vercel on each commit or merge.

Planning to add footer and some real-time data + images to see on how image rendering & optimisations happening.

#nextjs#react#vercel

Reference

Source of this app is available in the following path

https://github.com/PandiyanCool/next-experiment