title: How to use ternary operator for returning jsx using react and typescript?
body: <p>i want to return jsx based on condition using ternary operator.</p>
  
  <p>what i am trying to do?
  If admin variable is </p>
  
  <pre><code>true then display text "hello i am admin"
  false then display text "hello i am normal user"
  </code></pre>
  
  <p>i have the below code to do so</p>
  
  <pre><code>function Text({is_admin}: Props) {
      return is_admin ? (
          &lt;span&gt;Hello i am admin&lt;/span&gt;) : (
              &lt;span&gt;Hello i am normal user &lt;/span&gt;)
      );
  }
  </code></pre>
  
  <p>this code works. now i want to add another condition </p>
  
  <p>if <code>is_admin</code> is true and has <code>count</code> &lt; 0 display text "not visible user" and do not display text "hello i am admin"</p>
  
  <p>and text "hello i am normal user" will be displayed if <code>is_admin</code> is <code>false</code> </p>
  
  <p>how can i modify the above code to fit these conditions. could someone help me with this? thanks.</p>