title: Ternary operator is not working in react js render function
body: <p>We have a simple return render operation and we are deceding the return html using ternary operator, on the basis of state variable(<strong>anyException</strong>) value. Code snippet is shown below :</p>
  
  <pre><code> return &lt;Form
          validate={ formValidation }
          onSubmit={this.onSubmit}
          initialValues={initialValues}
          render={({ handleSubmit,  submitting,  valid }) =&gt; (&lt;form onSubmit={handleSubmit} className="k-form"&gt;
  
              &lt;div className="container-fixed"&gt;
              (this.state.anyException ?  
                      &lt;ErrorDialogPopup
                      anyException={this.state.anyException}
                      errorInfo={this.state.errorInfo}
                      toggleErrorDialog={this.toggleErrorDialog.bind(this)}
                      /&gt; : &lt;div className="row"&gt;
                  {this.state.errorMessages.map(function(errorMessage) {
                      return &lt;div className="errorMessage"&gt;{errorMessage}&lt;/div&gt;
                  })}
                  &lt;/div&gt;)
  
                  &lt;div&gt;
  
                      &lt;div className="row"&gt;
                          &lt;div className="col-sm-12"&gt;
                              &lt;div className="panel panel-default" id="frmNetworkAdd"&gt;
                                  &lt;div className="panel-heading"&gt;
                                      &lt;h1 className="panel-title" id="panelHeader"&gt;
                                          {this.state.networkId === -1? &lt;span&gt;Add Network&lt;/span&gt; : &lt;span&gt;Edit Network&lt;/span&gt;}
                                      &lt;/h1&gt;
                                  &lt;/div&gt;
  </code></pre>
  
  <p>But during run time, both the cases getting displayed. Could you please suggest what is going wrong here.</p>