title: Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
body: <p>I am trying to set up my <code>React.js</code> app so that it only renders if a variable I have set is <code>true</code>.  </p>
  
  <p>The way my render function is set up looks like:</p>
  
  <pre><code>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 (
      &lt;div&gt;
  
  if(this.state.submitted==false) 
  {
  
        &lt;input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} /&gt;
  
        &lt;ReactCSSTransitionGroup transitionName="example" transitionAppear={true}&gt;
        &lt;div className="button-row"&gt;
           &lt;a href="#" className="button" onClick={this.saveAndContinue}&gt;Request Invite&lt;/a&gt;
       &lt;/div&gt;
       &lt;/ReactCSSTransitionGroup&gt;
  }
     &lt;/div&gt;
      )
    },
  </code></pre>
  
  <p>Basically, the important portion here is the <code>if(this.state.submitted==false)</code> portion (I want these <code>div</code> elements to show up when the submitted variable is set to <code>false</code>).  </p>
  
  <p>But when running this, I get the error in the question:</p>
  
  <blockquote>
    <p>Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag</p>
  </blockquote>
  
  <p>What is the issue here?  And what can I use to make this work?</p>