Hide the badge number when it is 0 using React and Typescript-CodePudding

I am developing a Badge component. I want to hide the Bade when the number is 0.

I tried this on codesandbox. I am using invisible as a prop. This has a class "invisible". I am not sure how to apply this class when the batchContent is 0. I tried but it's not working. Not sure if using useState would help. Please help me with this. Thanks.

Here is my link https://codesandbox.io/s/badgecomponent-ljdq25?file=/src/components/Badge.tsx

CodePudding user response：

You could just render it conditionally - display it only if badgeContent is greater than 0.

{Number(badgeContent) > 0 && (
   <span className={`badgeContent`}>
      {displayValue}
   </span>
)}