Manipulating visibility of a Material UI/React Badge component based on content in the badgeContent

Question

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 display=none when name.warningsCount == 0 and name.problemsCount = 0. I'm having a hard time getting this done.

Here is the snippet of that code:

<Badge
    className="warning-badge"
    badgeContent={name.warningsCount > 0 && name.warningsCount}>
    <AlertWarning />
</Badge>
<Badge
    className="problems-badge"
    badgeContent={name.problemsCount > 0 && name.problemsCount}>
    <AlertWarning />
</Badge>

Thanks in advance!

Answer 1

You could also just render the badge when name.warningsCount is not empty:

{name.warningsCount > 0 && (
    <Badge
        className="warning-badge"
        badgeContent={name.warningsCount}
    >
        <AlertWarning />
    </Badge>
)}

No need to hide elements that shouldn't be rendered in the first place.

Answer 2

Latest Material UI version will not show a badge by default if the value is zero. This is because of a new showZero property which defaults to false. Then previous versions included the invisible property where you could put something like invisible={name.WargningsCount === 0}