blog

Adjacent JSX elements must be wrapped in an enclosing tag

Pandiyan MuruganLeave a comment

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!

Advertisement

7 common mistakes by newbie bloggers

Pandiyan MuruganLeave a comment

Choosing the domain

Choosing the wrong domain name or free domain. Picking the right domain name based on niche will help Visitors to remember easily & relate with content.

Mixing up niche

Don’t mix up the blog topics too much. Decide your niche clearly. If your blog is focused on programming, food or lifestyle. Mixing up niche will discourage recurring visitors. If you really want to cover multiple niche – maintain proper category.

Write consistently

Consistency is the key. Make proper plan, write and schedule the Content. If you can write one post in a week or two week. Just go with it and schedule post accordingly. One of my favorite blogger posts Content on every Tuesday and Friday.

Copying content without giving credits

If you are referring and copying a part of sentence from another site. Give proper credits in your post. And also never copy paste entire content. Respect others work.

Never to hesitate to write small post

Never hesitate to write “How To” kind of post. If it solves a rare problem, even if it is a small post. It will get more traction. Even my blog have such kind of posts which gains me more traffic and tops at Google search.

Avoid grammatical mistakes

N number of online free tools available to check the spelling mistakes and grammatical mistakes. I myself did these kind of mistakes at start of my blogging journey. Sometimes my friends read it and message me to correct it.

Have your own style of writing

Prepare your own way of presentation. Design your own content delivery technique and the social media sharing schedules.

Happy blogging!

Credits

Photo by Andrew Neel on Unsplash

Photo by Markus Winkler on Unsplash

Photo by Bench Accounting on Unsplash

Photo by NeONBRAND on Unsplash

Photo by Daniela Holzer on Unsplash