title: How to do a nested if else statement in ReactJS JSX?
body: <p>I wanted to know if its possible to do nested if else if in ReactJS JSX?</p>
  <p>I have tried various different ways and I am unable to get it to work.</p>
  <p>I am looking for</p>
  <pre><code>if (x) {
    loading screen
  } else {
    if (y) {
      possible title if we need it
    }
    main 
  }
  </code></pre>
  <p>I have tried this but I can not get it to render.  I have tried various ways.  It always breaks once I add the nested if.</p>
  <pre><code>{
    this.state.loadingPage ? (
      &lt;div&gt;loading page&lt;/div&gt;
    ) : (
      &lt;div&gt;
        this.otherCondition &amp;&amp; &lt;div&gt;title&lt;/div&gt;
        &lt;div&gt;body&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>Update</strong></p>
  <p>I ended up choosing the solution to move this to renderContent and call the function.  Both of the answers did work though.  I think I may use the inline solution if it is for a simple render and renderContent for more complicated cases.</p>
  <p>Thank you</p>