npmreactjs95% confidence\u2191 599

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

Full error message

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?

Solutionsource: stackoverflow \u2197

You should put your component between an enclosing tag, Which means: // WRONG! return ( <Comp1 /> <Comp2 /> ) Instead: // Correct return ( <div> <Comp1 /> <Comp2 /> </div> ) Edit: Per Joe Clay's comment about the Fragments API // More Correct return ( <React.Fragment> <Comp1 /> <Comp2 /> </React.Fragment> ) // Short syntax return ( <> <Comp1 /> <Comp2 /> </> )

API access

Get this solution programmatically \u2014 free, no authentication.

curl https://depscope.dev/api/error/b87a01ba1160471517f1fb8893db59f401decfefd21c5dda7d2edae905f8928b

hash \u00b7 b87a01ba1160471517f1fb8893db59f401decfefd21c5dda7d2edae905f8928b