Я пытаюсь настроить приложение React.js так, чтобы оно отображалось только в том случае, если заданная переменная имеет значение true.

Способ установки моей функции рендеринга выглядит следующим образом:

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>
    )
  },

По сути, важной частью здесь является часть if (this.state.submitted == false) (я хочу, чтобы эти div показывались, когда переданная переменная установлена ​​в false).

Но при запуске этого я получаю ошибку в вопросе:

Uncaught Error: Parse Error: Строка 38: Соседние элементы JSX должны быть заключены в тег

В чем здесь проблема? И что я могу использовать, чтобы сделать эту работу?