title: Best practice for an "empty" component - null? empty div? (A valid React element (or null) must be returned)
body: <p>I'm using typescript and react for a project and I have a case of nested components where I only want the inner component to result in content <em>if</em> some condition is true.</p>
  
  <p>For example: </p>
  
  <pre><code>export const SomeOverview = (info) =&gt; {
    ... // some data manipulation
    return (
       &lt;div&gt;
          &lt;div&gt;&lt;.... a bunch of stuff&lt;/div&gt;
          &lt;SomeDetail data={data}/&gt;
       &lt;/div&gt;
    )
  }
  
  export const SomeDetail = (info) =&gt; {
      ...
      if (&lt;some condition using info) {
          return (
              &lt;div&gt;
                  &lt;some content using info&gt;
              &lt;/div&gt;
          )
      }
      return null or &lt;div/&gt; ?
  }
  </code></pre>
  
  <p>I can't just not return anything if I don't go into the if statement or else I get the react element error. </p>
  
  <p>So for now I had tried putting in an empty div but it seems kind of like a hack. Is there a "better" way of accomplishing? </p>