I am trying to get a badge icon displayed when a component has notes attached to them. I have tried three ways and I get the same results which I find odd. Which one is the best way to implement this? Or is there any other way
first import Badge from '@material-ui/core/Badge';
function NotesBadge({ hasNotes }) {
return (
<Badge
anchorOrigin={{
vertical: 'top',
horizontal: 'right',}}
variant="dot"
color="primary"
invisible={hasNotes}>
</Badge>
);
}
export default NotesBadge;
second
import Badge from '@material-ui/core/Badge';
function NotesBadge({ hasNotes }) {
return (
<Badge
anchorOrigin={{
vertical: 'top',
horizontal: 'right',}}
variant="dot"
color="primary"
invisible={!hasNotes}>
</Badge>
);
}
export default NotesBadge;third
import Badge from '@material-ui/core/Badge';
function NotesBadge({ hasNotes }) {
if(hasNotes){
return (
<Badge
anchorOrigin={{
vertical: 'top',
horizontal: 'right',}}
variant="dot"
color="primary"
invisible={false}>
</Badge>
);
}
}
export default NotesBadge;The second approach is the way to go since Badge must be invisible when hasNotes is false, hence the name.