I am exploring ways to display a badge icon when a component has attached notes. I have experimented with three different methods and interestingly, the results are consistent across all of them. Which approach do you think is the most efficient for achieving this task? Is there perhaps another method that could be more effective?
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;