'Changing material UI button text based on a condition

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>
reactjstypescriptbuttonmaterial-ui


Solution 1:[1]

You can use ternary operator for solution.

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

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharmik Patel
Solution 2 Alazar-dev

Related Questions