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

0 votes

I am trying to set up my React.js app so that it only renders if a variable I have set is true.

The way my render function is set up looks like:

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)"} : {};
    return (
    <div>

if(this.state.submitted==false)
{

      <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
      <div className="button-row">
         <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
     </div>
     </ReactCSSTransitionGroup>
}
   </div>
    )
  },

Basically, the important portion here is the if(this.state.submitted==false) portion (I want these div elements to show up when the submitted variable is set to false).

But when running this, I get the error in the question:

Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag

What is the issue here? And what can I use to make this work?

Jun 8, 2020 in Java-Script by kartik
• 37,520 points
5,498 views

1 answer to this question.

0 votes

Hello @kartik,

You  just need to put your component between an enclosing tag which means:

Instead:

return (  
    <Comp1 />
    <Comp2 />
)

You can try this:

return (
    <React.Fragment>
       <Comp1 />
       <Comp2 />
    </React.Fragment>
)

//  For Short syntax

return (
    <>
       <Comp1 />
       <Comp2 />
    </>
)

Hope it helps!!

answered Jun 8, 2020 by Niroj
• 82,840 points

Related Questions In Java-Script

0 votes
1 answer

Error: Use of const in strict mode

Hello, If this is happening in nodejs, it ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,840 points
3,693 views
0 votes
1 answer

How can we detect timeout on an AJAX (XmlHttpRequest) call in the browser?

Hii, In order to handle a timeout: var xmlHttp ...READ MORE

answered Apr 27, 2020 in Java-Script by Niroj
• 82,840 points
5,758 views
0 votes
1 answer

How do you cache an image in Javascript?

Hii @kartik, You have to do three thigs: You ...READ MORE

answered Jun 2, 2020 in Java-Script by Niroj
• 82,840 points
7,867 views
0 votes
1 answer

How do I check if an element is hidden in jQuery?

Hello @kartik,  You can use CSS: class .hide { ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,840 points
995 views
0 votes
1 answer

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

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,840 points
2,513 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 5, 2020 in Java-Script by Niroj
• 82,840 points
1,056 views
0 votes
1 answer

How to loop inside React JSX?

Hello @kartik, You're just calling JavaScript functions. You ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,840 points
1,761 views
0 votes
1 answer

Error: Unexpected token import in nodejs

Hello, Unfortunately, Node.js doesn't support ES6's import yet. To accomplish what ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,840 points
9,358 views
0 votes
1 answer

How can we create an HTTPS server in Node.js?

Hii, The Express API doc spells this out pretty clearly. I ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,840 points
821 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP