Clever Geek Handbook

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

I am using the Badge component from Material UI, but it shows even when it is empty. Kind of stupid, they won't build this functionality out of the box. Why would anyone need a blank badge? Anyway, I hooked it up to my API to read data, but as I said, I would like the whole icon (icon and bubble) to be before display=none

, when name.warningsCount == 0

and name.problemsCount = 0

. It's hard for me to do this.

Here is a snippet of this 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!

+4


source to share


2 answers


You can also just give the icon if name.warningsCount

not empty:

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


No need to hide items that shouldn't be displayed in the first place.

+5


source


The latest version of the material UI will not display the default icon if the value is zero. This is because of a new property showZero

that has a default value false

. Back then, previous versions included a property invisible

where you could put something likeinvisible={name.WargningsCount === 0}



0


source






More articles:


All Articles