title: How to render jsx based on condition using react and typescript?
body: <p>i have code like below,</p>
  <pre><code>const ParentComponent = ({data}: {data: Array&lt;DataType&gt;}) =&gt; {
      const version = data.version; //version is an array
      const type = data.type; //type is an object
      const renderContent = () =&gt; {
          return (
              &lt;Flex flexDirection=&quot;column&quot;&gt;
                  &lt;div&gt;version&lt;/div&gt; //this to be displayed if version not empty
                  &lt;div&gt;{version}&lt;/div&gt; // this to be displayed if version is not empty
                  &lt;div&gt;type&lt;/div&gt; //this to be shown if type has name or version
                  &lt;div&gt;{type.name} {type.number}&lt;/div&gt; //this to be shown if type has 
                  // name or version 
              &lt;/Flex&gt;
          ); 
      }
  
      return(
          &lt;&gt;
              &lt;Flex&gt;
                  &lt;div&gt;
                      &lt;input type=&quot;checkbox&quot; /&gt; 
                  &lt;/div&gt;
              &lt;/Flex&gt;
              &lt;Icon name=&quot;help&quot; /&gt; //this to be displayed only when version is not 
              //empty array or type has name or number
          &lt;/&gt;
      );
  }
  </code></pre>
  <p>the above code works fine. but i want to display Icon only when version is not empty array or type has name or number</p>
  <p>and within rendercontent div with version should be shown if version not empty and div with type to be shown if type has name or version.</p>
  <p>how can i do it could someone help me with this. i am new to programming and learning on the go. thanks.</p>