Changing material UI button text based on a condition-CodePudding

I am using the material UI button for my component and want to change the button text based on a condition that if order amount is 0, show button text as "cancel" else show "refund". Please help me how can I do the same.

      <Button
        className={classes.refundButton}
        onClick={() => setIsDialogOpen(true)}
      >
        Refund
      </Button>

CodePudding user response：

You can use ternary operator for solution.

<Button
  className={classes.refundButton}
  onClick={() => setIsDialogOpen(true)}
  >
    {amount === 0 ? 'Cancel' : 'Refund'}
</Button>

CodePudding user response：

You can just store the state and read from there conditionally...

import { useState } from "react"


const [amount, setAmount] = useState(0)

<Button
  className={classes.refundButton}
  onClick={() => setIsDialogOpen(true)}
>
  {amount === 0 ? 'Cancel' : 'Refund'}
</Button>