close

[Solved] Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag in javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag Error Occurs?

Today I get the following error Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag in javascript.

How To Solve Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag Error ?

  1. How To Solve Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag Error ?

    To Solve Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag Error React components must wrapperd in single container,that may be any tag e.g. “< div>.. < / div>”

  2. Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

    To Solve Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag Error React components must wrapperd in single container,that may be any tag e.g. “< div>.. < / div>”

Solution 1

React element has to return only one element. You’ll have to wrap both of your tags with another element tag.

I can also see that your render function is not returning anything. This is how your component should look like:

var app = React.createClass({
    render () {
        /*React element can only return one element*/
        return (
             <div></div>
        )
    }
})

Also note that you can’t use if statements inside of a returned element:

render: function() {
var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    if(this.state.submitted==false) {
        return <YourJSX />
    } else {
        return <YourOtherJSX />
    }
},

Solution 2

React components must wrapperd in single container,that may be any tag e.g. “< div>.. < / div>”

You can check render method of ReactCSSTransitionGroup

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment