title: Manipulating visibility of a Material UI/React Badge component based on content in the badgeContent
body: <p>I am using the Badge component from Material UI but it displays even when it's empty. Kind of silly they wouldn't build that functionality out of the box. Why would anyone want an empty badge? Anyhow, I have it wired up to my APIs to read from the data, but as I said, I would like the entire Badge (icon and bubble) to <code>display=none</code> when <code>name.warningsCount == 0</code> and <code>name.problemsCount = 0</code>. I'm having a hard time getting this done.</p>
  
  <p>Here is the snippet of that code:</p>
  
  <pre><code>&lt;Badge
      className="warning-badge"
      badgeContent={name.warningsCount &gt; 0 &amp;&amp; name.warningsCount}&gt;
      &lt;AlertWarning /&gt;
  &lt;/Badge&gt;
  &lt;Badge
      className="problems-badge"
      badgeContent={name.problemsCount &gt; 0 &amp;&amp; name.problemsCount}&gt;
      &lt;AlertWarning /&gt;
  &lt;/Badge&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>