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

user_2083766 0
Viewed 13134

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!

material-ui reactjs
2 Answers

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}

user_2290520
Related