Error 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 4, 2020 in Angular by kartik
• 37,530 points
1,520 views

1 answer to this question.

0 votes

Hello @kartik,

It is happening because any where in your code you are returning two elements simultaneously.

e.g

return(
    <div id="div1"></div>
    <div id="div1"></div>
  )

It should be wrapped in a parent element. e.g

 return(
      <div id="parent">
        <div id="div1"></div>
        <div id="div1"></div>
      </div>
      )

Hope this work!!

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

Related Questions In Angular

0 votes
1 answer

How to have conditional elements and keep DRY with Facebook React's JSX?

Hello @kartik, Let's define a simple helping If component: var If ...READ MORE

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

How do you import a javascript package from a cdn/script tag in React?

Hello, Go to the index.html file and import ...READ MORE

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

Error:XMLHttpRequest GET not working in React.js

Hello @kartik, You should populate data with AJAX ...READ MORE

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

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

Hello @kartik, You need export default or require(path).default var ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,840 points
1,675 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
283 views
0 votes
1 answer

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

Hello @kartik, You  just need to put your ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,840 points
2,824 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
484 views
0 votes
1 answer

Error:getting “ENOTEMPTY: directory not empty, rmdir …” error on installing express in angular CLI app.

Hello Kartik, Use this command : npm install ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,840 points
4,205 views