title: React conditional rendering for nested if condition
body: <p>I want to check for multiple nested conditions. Cant seems to figure out a way to do it.
  First check if fine and there are no issues with that,
  but after the first check, when i add second check and no matter which brace i use to wrap it still throws an error.</p>
  <p>Sample code:</p>
  <pre><code>  return (
        &lt;Fragment&gt;
          &lt;div&gt;
            { title }
          &lt;/div&gt;
          &lt;div&gt;
            { check1 ?
              (&lt;p&gt;
                Status
              &lt;/p&gt;
  
               { check2 ? 
                &lt;p&gt;
                &lt;a &gt;
               desc &lt;/a&gt; desc
              &lt;/p&gt; :
              &lt;a&gt;
              desc
            &lt;/a&gt;
              }
              )
              :
              {
                check3 ?
                &lt;p&gt;
                &lt;a&gt;
                  anchor
                &lt;/a&gt;
                desc
              &lt;/p&gt;
              :
              &lt;p&gt;
              &lt;a 
               anchor
              &lt;/a&gt;
              desc
            &lt;/p&gt;
            }
          }
          &lt;/div&gt;
        &lt;/Fragment&gt;
  </code></pre>