I'm creating a function to tell the content of a candy machine and running into the issue that items remaining is in BigNumber instead of number. I want to show if zero items remaining then say the candy machine is sold out. Also, use it in the onClick function in the return.

import { CandyMachine } from "@metaplex-foundation/js";

const getFreeMintButtonContent = () => {
  if (!candyMachine) {
    return "Loading...";

  if (isUserMinting) {
    return "Minting in progress..";
    // candyMachine.itemsRemaining is a bigNumber and === 0 is a number so there is conflict //
  } else if (candyMachine.itemsRemaining === 0) {
    return "Sold out";
  } else {
    return "FREE";

return (

<div className={styles.mintButton}>
              <Button onClick={async () => await freeMintButtonClicked()} disabled={isUserMinting || candyMachine?.itemsRemaining === 0}>
                <Typography variant="body2" color="textSecondary" style={{
                    fontSize: "16px",
                    fontWeight: "bold",
                    color: "white",
                    textAlign: "center",
                  { getFreeMintButtonContent() }

1 Answer 1


You can try using Number(candyMachine.itemsRemaining) for the check in your frontend

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.